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))
}
}
本文标题:jquery实现本地数据上拉加载更多分页
本文链接:https://www.haomeiwen.com/subject/ksketktx.html
网友评论