var page = 2;
var sover = 0;
window.onscroll = function () {
if(window.innerHeight + $(document).scrollTop()==document.body.scrollHeight){
if(this.sover==0){
//触发ajax事件获取记录
$.ajax({
type : 'GET',
url : '<%=basePath%>demand/list?pageSize=5&pageNum='+page,
dataType :'json',
success : function(data) {
if(data.list.length==0){
alert("加载完毕");
}else{
var result ="";
for (var i = 0; i < data.list.length; i++) {
result+='<li onmouseover="this.style.background=\'#efefef\'" onmouseout="this.style.background=\'#fff\'" class="demand" style="height: 120px;">'
+'<a href="javascript:;" onclick="detail('+data.list[i].id+')" style="font-size: 22px;margin-top: 10px;">'+data.list[i].projectname+'</a>'
+'<p style="font-size: 16px;">'+data.list[i].demand+'</p>'
+'<p style="margin-top: 10px;">'
+'<small style="color:#9D9D9D;font-size:10px;margin-left:15px;">'+data.list[i].username+'</small>'
+'<small style="color:#9D9D9D;font-size:10px;margin-left:15px;">'+data.list[i].datatime+'</small>'
+'<small style="color:#9D9D9D;font-size:10px;margin-left:15px;">阅读'+data.list[i].demandview+'</small>'
+'</p></li>';
}
setTimeout(function() {
var index =index = layer.load(1,{shade:[0.1,'#fff']});
setTimeout(function(){layer.close(index);},300);
$('.prolist').append(result);
page += 1;
//最后一页
if (data.pageNum==data.pages) {
this.sover = 1;
loadover();
}
}, 1000);
}
}
});
}
};
}
//加载完
function loadover() {
if (sover == 1) {
var overtext = "Duang~到底了";
if ($(".loadover").length > 0) {
$(".loadover span").eq(0).html(overtext);
} else {
var txt = '<div class="loadover" style="background-color: white;"><span>'+overtext+'</span></div>';
$("body").append(txt);
}
}
}
var sover = 0;
window.onscroll = function () {
if(window.innerHeight + $(document).scrollTop()==document.body.scrollHeight){
if(this.sover==0){
//触发ajax事件获取记录
$.ajax({
type : 'GET',
url : '<%=basePath%>demand/list?pageSize=5&pageNum='+page,
dataType :'json',
success : function(data) {
if(data.list.length==0){
alert("加载完毕");
}else{
var result ="";
for (var i = 0; i < data.list.length; i++) {
result+='<li onmouseover="this.style.background=\'#efefef\'" onmouseout="this.style.background=\'#fff\'" class="demand" style="height: 120px;">'
+'<a href="javascript:;" onclick="detail('+data.list[i].id+')" style="font-size: 22px;margin-top: 10px;">'+data.list[i].projectname+'</a>'
+'<p style="font-size: 16px;">'+data.list[i].demand+'</p>'
+'<p style="margin-top: 10px;">'
+'<small style="color:#9D9D9D;font-size:10px;margin-left:15px;">'+data.list[i].username+'</small>'
+'<small style="color:#9D9D9D;font-size:10px;margin-left:15px;">'+data.list[i].datatime+'</small>'
+'<small style="color:#9D9D9D;font-size:10px;margin-left:15px;">阅读'+data.list[i].demandview+'</small>'
+'</p></li>';
}
setTimeout(function() {
var index =index = layer.load(1,{shade:[0.1,'#fff']});
setTimeout(function(){layer.close(index);},300);
$('.prolist').append(result);
page += 1;
//最后一页
if (data.pageNum==data.pages) {
this.sover = 1;
loadover();
}
}, 1000);
}
}
});
}
};
}
//加载完
function loadover() {
if (sover == 1) {
var overtext = "Duang~到底了";
if ($(".loadover").length > 0) {
$(".loadover span").eq(0).html(overtext);
} else {
var txt = '<div class="loadover" style="background-color: white;"><span>'+overtext+'</span></div>';
$("body").append(txt);
}
}
}
本文介绍了如何利用Ajax实现页面滚动到底部时自动加载更多内容的功能。通过监听滚动事件,当用户滚动到页面底部时,发送Ajax请求获取新数据。在接收到数据后,将新内容追加到页面中,并在所有数据加载完毕后显示提示信息。
270

被折叠的 条评论
为什么被折叠?



