jQuery实现简单实用的H5(手机端)下拉分页加载（所谓的懒加载！！！）

话不多说，直接码上 。

 

<div>

         <div>展示内容列表块</div>

          //now当前页数   num总页数  这些需要在列表初始化的时候计算好，并赋值给此属性           

         <div class="caseud" now="1" num="2"> 
                <a href="javascript:;">加载更多</a>
         </div>

</div>

<script type="text/javascript">

      //记录状态
      var normalState=true;
      //滚动条滚动的时候
      $(window).scroll(function(){
        //获取当前加载更多按钮距离顶部的距离     
       var bottomsubmit = $('.normalCaseud').offset().top;
       //获取当前页面底部距离顶部的高度距离
        var nowtop = $(document).scrollTop()+$(window).height();
        //获取当前页数，默认第一页
        var now = $('.normalCaseud').attr('now');
        //获取总页数，PHP分页的总页数
        var num = $('.normalCaseud').attr('num');
        //当当前页面的高度大于按钮的高度的时候开始触发加载更多数据
        console.log(bottomsubmit,nowtop);
        if(nowtop>bottomsubmit){
          console.log("加载更多");
            //如果为真继续执行，这个是用于防止滚动获取过多的数据情况
            if(state==true){
                //执行一次获取数据并停止再进来获取数据
                state=false;
          
                setTimeout(function(){
                    //当前页数++
                    now++;
                   //记录当前为第二页
                    $('.normalCaseud').attr('now',now);
                   $.ajax({
                       //通过ajax传页数参数获取当前页数的数据,ajax_more_case.php代码参考php分页功能
                        url:'url',
                        type:'GET',
                        cache:false,
                        dataType:"html",
                        success:function(data){
                            //把通过php处理的html和数据，写入容器底部
                            $('.case').append(data);
                            //如果当前页大于等于总页数就提示没有更多数据

                           高能注意！！！！

                           如果当前页是从0开始的，这里就不变，

                           /如果是当前页是从1开始,这里就需要换成（now>num)
                            if(now>num){ 
                                $('.normalCaseud a').text('没有更多数据');
                                //并把状态设置为假，下次下滑滚动时不再通过ajax获取数据
                                state=false;
                           }else{
                               //否则继续
                                state=true;
                            }
                        },
                       error:function(){
                            $('.normalCaseud a').text('加载错误,请刷新页面！');
                        }
                    });
                },500);
            }
        }
      });

</script>

注意：

        normalState（全局变量） ：此变量需要在刷新列表时进行初始化（true）。

        加载更多：底部提示语也需要在刷新列表的时进行初始化，效果会好一点。

看完是不是感觉简单又很实用哎。