PHPCMS V9 实现下拉加载的方法,兼容手机端
HTML部分
<!--列表--> <div id="lists"> <!--本示例显示所有最新文章,根据实际情况自行调整--> {pc:get sql="SELECT * FROM `v9_news` where status=99 Order by updatetime DESC " num="10"} {loop $data $n $r} <a href="{$r[url]}"> <img src="{thumb($r[thumb],520,160)}"> <!--自动缩放裁剪图片大小520x160--> <dl> <dt>[{$CATEGORYS[$r[catid]][catname]}] {$r[title]} - {date('m/d',$r[inputtime])}</dt> <!--$CATEGORYS 调用缓存栏目名称--> <dd>{str_cut($r[description],200)}</dd> <!--描述截取200个字符--> </dl> </a> {/loop} {/pc} </div> <!-- 示例: {链接} {图片} [{栏目}]{标题} - {时间} {描述} --> <!--加载提示--> <div id="loading" style="display:none"></div>
JavaScript脚本部分
<script> $(function(){ var pager=1; /*定义开始页码*/ var controller=true; /*定义控制器,防止重复加载*/ $(window).scroll(function() { /*监听滚动事件*/ /*当内容滚动到底部时加载新的内容(注:当距离最底部100个像素时开始加载)*/ if ($(this).scrollTop() + $(window).height() + 100 >= $(document).height() && $(this).scrollTop() > 100) { $("#loading").html("加载中,请稍后...").show(); /*打开加载提示*/ if(controller==true){/*如果控制器是开的*/ controller=false;/*关闭加载*/ pager=pager+1;/*当前要加载的页码*/ $.getJSON("{APP_PATH}api.php?op=autoload&page="+pager, function(data){ var i=0; $.each(data,function(r){ i++; var html='<a href="'+data[r].url+'"><img src="'+data[r].thumb+'"><dl><dt>['+data[r].catname+'] '+data[r].title+' - '+data[r].updatetime+'</dt><dd>'+data[r].description+'</dd></dl></a>'; /*示例 var html='<a href="'+data[r].url+'"> <img src="'+data[r].thumb+'"> <dl> <dt>['+data[r].catname+'] '+data[r].title+' - '+data[r].updatetime+'</dt> <dd>'+data[r].description+'</dd> </dl> </a>'; */ $("#lists").append(html);/*追加到列表中*/ });/*end each*/ controller=true;/*开启加载*/ $("#loading").hide(); /*关闭加载提示*/ if(i==0){ $("#loading").html("已经全部加载完").show(); } });/*end getJSON*/ }/*end if*/ }/*end if*/ });/*end scroll*/ });/*end function*/ </script>
PHP部分
defined('IN_PHPCMS') or exit('No permission resources.'); $db = ''; #加载内容模型 $db = pc_base::load_model('content_model'); #重定义加载的表名 $db->table_name = 'v9_news'; #加载缓存中的栏目名称,注 category_content_站点ID $CATEGORYS = getcache('category_content_1','commons'); $page=isset($_GET['page'])?intval($_GET['page']):1; #判断传入的page是否存在 #查询表数据 $data = $db->select( 'status=99 ORDER BY `id` DESC LIMIT '.($page-1)*10 .' , ' . 10 .' '#根据实际情况调整where语句 ,'id,catid,title,style,thumb,description,url,updatetime,inputtime,username' #需要调取的字段,如需要全部字段则删除本段 ); #定义数组容器 $array=array(); #遍历查询到的数组,注:如不需要对 图片、时间、栏目进行转换可跳过遍历直接将$data输出 foreach ($data as $key => $value) { $array[]=array( "id"=>$value['id'], "title"=>$value['title'], "style"=>$value['style'], "thumb"=>$value['thumb']?thumb($value['thumb'],520,160):"", "description"=>str_cut($value['description'],200), "url"=>$value['url'], "updatetime"=>date('m/d',$value['updatetime']), "inputtime"=>date('m/d',$value['inputtime']), "username"=>$value['username'], "catname"=>$CATEGORYS[$value['catid']]['catname'] ); } #将数组转换为json数据并输出 echo json_encode($array);
常见问题
1、下拉无法加载
使用Google Chrome浏览器访问按F12,查看控制台中是否存在js错误。
2、下拉重复显示
请确认排序是否一致
例如:前台调用标签 Order by updatetime DESC 是否与后端php sql查询一致