jq无限加载,上拉无效加载数据

首先要给滚动做一个事件监听,用jq的on即可,然后计算滚动的高度,设置上拉一定高度(这里设置50px)后开始加载数据,当然也要做防止反复请求(stop),利用分页原理定量加载,用滚动需要scroll事件,所以要给事件的容器设置一个高度。下面是实现无限加载数据的js:

<script type="text/javascript">
    var stop = true;  
    function addItems() {
        var html = '';
        if(!curpage){
            curpage = 1;
        }
        $.ajax({
            type:"post",
            url:'xxxxxx=getData',
            dataType:'Json',
            data:{
                curpage:curpage
            },
            success:function (res) {
                if (res.code==0){
                    curpage = curpage + 1;
                    console.log(res.data.length)
                    for (var i = 0; i < res.data.length; i++) {
                        html +='<li class="item-content" >';
                        html +='<div class="item-media"><i class="icon icon-f7"></i></div>';
                        html +='<div class="item-inner">';
                        html +='<div class="item-title">交易时间</div>';
                        html +='<div class="item-after">'+res.data[i].addtime+'</div>';
                        html +='</div>';
                        html +=' </li>';

                    }
                    $(".lists").append(html);
                    stop = true;
                }else {
                    stop = false;
                }
                $("#show-preloader").css('display','none');
            },
            error:function () {
                stop = false;
            }
        })
    }
//page类一定要设置高度
    $(".page").on("scroll",function (e) {
        var sheight = e.currentTarget.scrollHeight;//页面高度
        var viewHgieht = e.currentTarget.offsetHeight;//可见高度
        var top = e.currentTarget.scrollTop;//滚动高度
        if((top +viewHgieht) > (sheight - 50 ) ){
            if (stop){
                stop = false;
                $("#show-preloader").css('display','block');
                addItems();//请求数据
            }
        }
    });

评论/留言