话不多说,直接码上 。
<div>
<div>展示内容列表块</div>
//now当前页数 num总页数 这些需要在列表初始化的时候计算好,并赋值给此属性
<div class="caseud" now="1" num="2">
<a href="javascript:;">加载更多</a>
</div></div>
<script type="text/javascript">
//记录状态
var normalState=true;
//滚动条滚动的时候
$(window).scroll(function(){
//获取当前加载更多按钮距离顶部的距离
var bottomsubmit = $('.normalCaseud').offset().top;
//获取当前页面底部距离顶部的高度距离
var nowtop = $(document).scrollTop()+$(window).height();
//获取当前页数,默认第一页
var now = $('.normalCaseud').attr('now');
//获取总页数,PHP分页的总页数
var num = $('.normalCaseud').attr('num');
//当当前页面的高度大于按钮的高度的时候开始触发加载更多数据
console.log(bottomsubmit,nowtop);
if(nowtop>bottomsubmit){
console.log("加载更多");
//如果为真继续执行,这个是用于防止滚动获取过多的数据情况
if(state==true){
//执行一次获取数据并停止再进来获取数据
state=false;
setTimeout(function(){
//当前页数++
now++;
//记录当前为第二页
$('.normalCaseud').attr('now',now);
$.ajax({
//通过ajax传页数参数获取当前页数的数据,ajax_more_case.php代码参考php分页功能
url:'url',
type:'GET',
cache:false,
dataType:"html",
success:function(data){
//把通过php处理的html和数据,写入容器底部
$('.case').append(data);
//如果当前页大于等于总页数就提示没有更多数据高能注意!!!!
如果当前页是从0开始的,这里就不变,
/如果是当前页是从1开始,这里就需要换成(now>num)
if(now>num){
$('.normalCaseud a').text('没有更多数据');
//并把状态设置为假,下次下滑滚动时不再通过ajax获取数据
state=false;
}else{
//否则继续
state=true;
}
},
error:function(){
$('.normalCaseud a').text('加载错误,请刷新页面!');
}
});
},500);
}
}
});</script>
注意:
normalState(全局变量) :此变量需要在刷新列表时进行初始化(true)。
加载更多:底部提示语也需要在刷新列表的时进行初始化,效果会好一点。
看完是不是感觉简单又很实用哎。