搜 索

phpcms实现向下滑动后自动加载效果

编辑:QTOOL.NET日期:2019-07-27440

本文简单介绍了使用phpcms制作的页面列表中如何实现向下滑动加载更多的效果.
首先在phpcms更目录api文件夹中,新建一个名为zdload.php的空白文件
这里以调用文章模型列表为例,在文件中加入如下代码作为服务端:
<?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代码调用
<div id="newlists">
    {pc:get sql="SELECT * FROM `v9_news` where status=99 Order by id DESC " num="10"}
    {loop $data $n $r}
    <a href="{$r[url]}"><img src="{$r[thumb]}"><li>
          <dt>{$r[title]}{str_cut($r[description],230)}</dt>
      </li>
    </a>
    {/loop}  
    {/pc} 
</div>
<div id="loading" style="display:none"></div>
<script src="jQuery的地址/jQuery.js"></script>
<script>
$(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='<a href="'+data[r].url+'"><img src="'+data[r].thumb+'"><li><dt>'+data[r].title+data[r].description+'</dt></li></a>';
                      $("#newlists").append(html);//追加到列表
                  }); 
                  $("#loading").hide(); 
                  kzsx=true;
                  if(i==0){ 
                     $("#loading").html("没有更多数据了!").show();  
                  }
              });
          }
      }
    });
});
</script>
保存后通过js端的请求与服务端的配合,即可实现在文章页面中下拉加载更多的效果.

TAG标签:phpcms
此文章由QTOOL.NET编辑
最新文章

热门标签