ajax下拉到页面底部，加载内容列表

html：

<div class="qbcp_content"></div>
<div class="loading_text" style="text-align: center;display: none;">加载中……</div>
<div class="no_record" style="text-align: center;display: none;">没有了</div>

引入js模板：

<script type="text/javascript" src="__PUBLIC__/js/doT.min.js"></script>

<script id="j-tmpl" type="text/template">
    {{ for(i=0; i<it.length; i++) { }}
        <a href="{{=it[i].url}}" target="_blank">
            <img src="__ROOT__/Attached/{{=it[i].thumbs}}" />
            <p>{{=it[i].title}}</p>
        </a>
     {{ } }}    
</script>    

    <script>
    $(function(){
        //总页数，当前页
        var p_count=0, p=1;
        function getLists(){
            //比较当前页和总页数
                $.ajax({
                    url:'{:U("getLists")}',    
                    data:{p:p},
                    dataType:'json',
                    async:false,
                    success:function(d){
                        var tmpl = $('#j-tmpl').html();
                        var doTtmpl = doT.template(tmpl);
                        $('.qbcp_content').append(doTtmpl(d.cnt));
                        //页码加1
                        p++; 
                        //取得总页数
                        p_count = d.p_count;    
                    }
                });
        }

        getLists();


        var winH = $(window).height(); //页面可视区域高度  
          $(window).scroll(function() {
                  if(p <= p_count){
                          var pageH = $(document.body).height();  
                            var scrollT = $(window).scrollTop(); //滚动条top  
                        //var aa = (pageH - winH - scrollT) / winH;  
                        var bb = (pageH - winH - scrollT) ;
                        if (bb < 80) {
                            $('.loading_text').show();
                            setTimeout(function(){
                                getLists();
                                 $('.loading_text').hide();
                            }, 200);
                        }
                }else{
                    $('.no_record').show();    
                }
          });
    })
    </script>

后台接收数据处理：

    public function getLists(){
        $p_size = 32;
        $where = '`is_check`=1';
        $count =  M('Msg')->where($where)->count();
        $page = new \Think\Page($count,$p_size);
        $page->setConfig('theme', "%UP_PAGE% %LINK_PAGE% %DOWN_PAGE% %END% <label class='f_14 clr_6'>共%TOTAL_ROW%条</label>");
        $this->page = $page->show();
        $lists = M('Msg')->where($where)->limit($page->firstRow.','.$page->listRows)->select();
        foreach($lists as $k=>$v){
            $lists[$k]['title']= msubstr2($v['title'],0, 4);
        }
        $ret['p_count'] =  ceil($count / $p_size);
        $ret['cnt'] = $lists;
        die(json_encode($ret));
    }

 

转载于:https://www.cnblogs.com/ximishuier/p/10277721.html