您现在的位置是:网站首页> php专栏 扩展知识

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

亦然2019-10-28 14:52:38扩展知识人已围观

简介为了方便用户阅览,一般传统的点击分页会改为下拉滑动分页。当滚动条到达页面底部,数据会自动加载。

一:原理

 监听窗口滚动,判断滚动条是否到达了底部,这个公式是可视窗口高度+滚动条高度大于等于页面高度,这时就可以通过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>  

很赞哦!()

文章评论

    请先说点什么
    热门评论
    人参与,0条评论
亦然

亦然(共33篇文章)

愿你我既可以朝九晚五,也可以浪迹天涯;愿你我既可以拈花把酒,也能围炉诗书茶。