本文简单介绍了使用phpcms制作的页面列表中如何实现向下滑动加载更多的效果.
首先在phpcms更目录api文件夹中,新建一个名为zdload.php的空白文件
这里以调用文章模型列表为例,在文件中加入如下代码作为服务端:
defined('IN_PHPCMS') or exit('No permission resources.');
$db = '';
$db = pc_base::load_model('content_model');//加载模型
$db->table_name = 'v9_news';//调用v9_news文章列表
$page=isset($_GET['page'])?intval($_GET['page']):1;//获取页数
$arrdata = $db->select('status=99 ORDER BY `id` DESC LIMIT '.($page-1)*10 .' , ' . 10 .' ','id,catid,title,thumb,description,url');
$ssarr=array();
#遍历查询到的数组,注:如不需要对 图片、时间、栏目进行转换可跳过遍历直接将$data输出
foreach ($arrdata as $key => $value) {
$ssarr[]=array(
"id"=>$value['id'],
"url"=>$value['url'],
"title"=>$value['title'],
"thumb"=>$value['thumb']?thumb($value['thumb'],500,230):"",
"description"=>str_cut($value['description'],230),
);
}
echo json_encode($ssarr);
?>
保存后在文章列表页中写上如下html代码调用
{pc:get sql="SELECT * FROM `v9_news` where status=99 Order by id DESC " num="10"}
{loop $data $n $r}
{$r[title]}{str_cut($r[description],230)}{/loop}
{/pc}
$(function(){
var zpage=1; //定义开始页数
var kzsx=true;
$(window).scroll(function() {
//监听页面的滚动条事件
//当内容滚动到底部距底部130px时开始加载
if ($(this).scrollTop() + $(window).height() + 130 >= $(document).height() && $(this).scrollTop() > 130) {
$("#loading").html("加载中......").show();
if(kzsx==true){
kzsx=false;//关闭加载,防止重复
zpage=zpage+1;//当前页
$.getJSON("{APP_PATH}api.php?op=zdload&page="+zpage, function(data){
var i=0;
$.each(data,function(r){
i++;
var html=''+data[r].title+data[r].description+'';
$("#newlists").append(html);//追加到列表
});
$("#loading").hide();
kzsx=true;
if(i==0){
$("#loading").html("没有更多数据了!").show();
}
});
}
}
});
});
保存后通过js端的请求与服务端的配合,即可实现在文章页面中下拉加载更多的效果.