美文网首页
jquery实现本地数据上拉加载更多分页

jquery实现本地数据上拉加载更多分页

作者: 拾钱运 | 来源:发表于2020-06-09 17:10 被阅读0次
var loadS=false  //是否加载完成
var pageAjax={
    pageNo:1,
    pageSize:20,
    loader:$('.mui-loading'),//加载中
    endText:$('.mui-end'),//结束
    loadMore:$('.mui-more'),//加载更多
    throttle:function (func,delay){//延缓滚动加载次数,防止抖动
        var timer=null
        var startTime=Date.now()
        return function(){
            var curTime=Date.now();
            var remaining=delay-(curTime-startTime);
            var context=this;
            var args=arguments;
            clearTimeout(timer);
            if(remaining<=0){
                func.apply(context,args)
                startTime=Date.now();
            }else{
                timer=setTimeout(func,remaining)
            }
        }
    },
    getDateInit:function(pageId,tableData){
        var index=pageAjax.pageSize*pageId-1
        var pageIndex=(pageId-1)*pageAjax.pageSize //从当前开始循环表格数据
        var list=[]
        if(!loadS){
            for(var i=pageIndex;i<tableData.length;i++){
                list.push(tableData[i])
                pageAjax.loadMore.show(); 
                if(i==tableData.length-1){
                    loadS=true
                    $('.mui-end').show();
                } 
                if(i>=index||i==tableData.length-1){
                    return  list
                }   
                
            }
        }else{
            //已经全部加载完成
            $('.mui-end').show();
        }
       
    },
    scrollFunc:function(){
      $(window).scroll(pageAjax.throttle(function(){
        var scrollTop=$(this).scrollTop()//滚动条距离顶部得高度
        var scrollHeight=$(document).height()//当前页面得总高度
        var clientHeight=$(this).height()//当前可视得页面高度
        if(scrollTop+clientHeight>=scrollHeight-50){
            if($('.mui-end').css('display')=='none'){
                pageAjax.pageNo++;
                var list=  pageAjax.getDateInit(pageAjax.pageNo,tableJson)
                tableArr=tableArr.concat(list)
                setTable(tableArr)
            }else{
            pageAjax.loadMore.hide()
          }
        }
    },2000))
  }
}

相关文章