首先要给滚动做一个事件监听,用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();//请求数据
}
}
});