jquery 上滑加载更多

Posted 挂件

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了jquery 上滑加载更多相关的知识,希望对你有一定的参考价值。

$(document).ready(function() {
     
     var totalPage = {$totalPage};//总页数
     var page = {$page}; //起始页
     var pageSize = {$pageSize} //每页显示个数
    $(window).scroll(function() {
         if(totalPage-page>0){ 
            //滚动条到达底部加载  
            if ($(document).scrollTop() >= $(document).height() - $(window).height()) {
            
                setTimeout(function() {
                           $.ajax({  
                                type: ‘GET‘,  
                                url: ‘?m=wap&c=vedio&a=art_more&typeid=93&yp=128&pageNum=‘+(page+1),  
                                success:function(data){  
                                    var msg=eval(data);
                                         $.each(msg, function (i, item) { 
                                             $(‘.art-list‘).append("<li><a href="+item.art_link+">"+item.title+"</a></li>");
                                        });  
                                    page=page+1;
                                },  
                                error:function(data){ 
                                     $("#nomore").html("加载失败...");  
                                     setTimeout(function() {   
                                            $("#nomore").html();  
                                        }, 3000);     
                                },
                               
                               
                            });  
                    
                }, 200);
            }
        }else{  
                  $("#nomore").html("我是有底线的...");  
                    setTimeout(function() {   
                         $("#nomore").empty();
                    }, 3000); 
        }  
    });  
});   

 

页面:

<ul class="art-list">
      {loop $art_all $k $v}
          <li><a href="#">{$v[‘title‘]}</a></li>
      {/loop}
</ul> <div id="nomore" style="text-align:center;color:gray"></div>

控制器:

$this->ys = pc_base::load_model(‘artarea_model‘);
        
        $page=intval($_GET[‘pageNum‘])?intval($_GET[‘pageNum‘]):1; //当前页
        $res=$this->ys->select(‘‘,"id");
        $total=count($res);  //文章总数
        $pageSize =3;    //每页显示条数
        $starpage=($page-1)*$pageSize;//起始数据
        $totalPage =ceil($total/$pageSize); //总页数
        $sql="select a.*,b.pic_more from v9_artarea a left join v9_artarea_data b  on a.id=b.id order by a.inputtime desc limit $starpage,$pageSize ";
        $art_obj=$this->ys->query($sql);
        foreach ($art_obj as$k=> $v){
            
            $v[‘pic_more‘]=string2array($v[‘pic_more‘]);
            $art_all[]=$v;            //艺术圈文章列表
        }

more

public function art_more(){
        $this->ys = pc_base::load_model(‘artarea_model‘);
        $page=intval($_GET[‘pageNum‘]);
        $res=$this->ys->select(‘‘,"id");
        $total=count($res);  //文章总数
        $pageSize =3;    //每页显示条数
        $starpage=($page-1)*$pageSize;//起始数据
        $totalPage =ceil($total/$pageSize); //总页数
        
//         if($page>$totalPage){
//             return json_encode(‘error‘);
//         }else{
            
            $sql="select a.*,b.pic_more from v9_artarea a left join v9_artarea_data b  on a.id=b.id order by a.inputtime desc limit $starpage,$pageSize ";
            $art_obj=$this->ys->query($sql);
            foreach ($art_obj as$k=> $v){
                    
                $v[‘pic_more‘]=string2array($v[‘pic_more‘]);
                $art_all[]=$v;            //艺术圈文章列表
            }
        echo  json_encode($art_all);
//         }
    }

 


以上是关于jquery 上滑加载更多的主要内容,如果未能解决你的问题,请参考以下文章

vue 上滑加载更多

微信小程序 scroll-view 上滑没有加载更多问题

在片段中添加上滑面板

JQuery - 导航菜单上滑/下滑过渡

最后一个元素完成 jQuery 上滑效果后如何运行代码? [复制]

解决上滑过程中数据重复的问题