php实现列表页新闻页ajax下拉加载更多数据

一：原理

 监听窗口滚动，判断滚动条是否到达了底部，这个公式是可视窗口高度+滚动条高度大于等于页面高度，这时就可以通过ajax累加新的数据。而后端通过ajax传的分页参数来返回对应的数据列表。效果参考本站首页:https://www.baikesec.com

二：实现代码

 这里以thinkphp为基础为例，默认下发10条数据，当需要自动加载时，分页页码传的是2。

1>控制器代码：

  
public function getArticle(){
   	   $page = input('page');
   	   $limit = 10;
   	   $res = Db::field('title,createtime,url,s_catename,s_pagename,description,pic,createby,head_image')
			->table('hx_article')
			->alias('a')
			->join('hx_spage w', 'a.type_id = w.s_id')
			->join('hx_admin d','a.createby = d.username')
			->order('a.createtime desc')
			->where('display',1)->page($page)->limit($limit)->select();
   	   return $res;
   }

2>页面数据渲染代码：

这里加入了一个加载特效图片，当自动加载下一页时，出来等待特效。

 <div id="container">
        {volist name="pnews" id="p"}
          <li>
               /*这里是列表数据*/
          </li>
        {/volist}
 </div>
 <div class="pagination-loading" style="text-align: center;">
         <img src="images/loading.gif" />
</div>

3>ajax加载代码：

 <script type="text/javascript">  
$(function(){  
    //防止加载两次
    var load=0;
    var winH = $(window).height(); //页面可视区域高度  
    var i = 2;  
    $(window).scroll(function () {  
        if(load)return;
        var pageH = $(document.body).height();  
        var scrollT = $(window).scrollTop(); //滚动条top  
        var aa = (pageH-winH-scrollT)/winH;  
        if(aa<0.02){  
            load=1;
            $.getJSON("方法路径",{page:i},function(json){
              load=0;
                if(json != ''){  
                    var str = "";    
                    $.each(json,function(index,array){  
                        var str = "数据列表";  
                        $("#container").append(str);  
                    });  
                    i++;  
                }else{ 
                  $(".pagination-loading").show().html("已经拉动底了，啦啦啦");
                  return false;  
                }  
            });  
        }  
    });  
});  
</script>  

转载：感谢您对梦屿千寻个人博客网站平台的认可，以及对我们原创作品以及文章的青睐，非常欢迎各位朋友分享到个人站长或者朋友圈，但转载请说明文章出处“来源梦屿千寻个人博客”。

很赞哦!()