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