原文链接：https://blog.csdn.net/qq_33527238/article/details/72518345
加载效果：
加载更多
加载完成
场景：加载与客户的沟通记录，一个客户的记录长期积累下来是非常多的，需要实现网页滚动到页面底端时加载更多数据
方法：加载更多的实质还是分页查询，只是展示方式不向分页那样只展示一页的内容
代码中class/id 都需要自己写样式，css不再展示，@ViewBag.** 为后台传过来的值，我用的.net mvc
<script>
var page=1;
var finished=0;
var sover=0;
//如果屏幕未到整屏自动加载下一页补满，#followingpage此页的div的id
var setdefult=setInterval(function (){
if(sover==1)
clearInterval(setdefult);
else if($("#followingpage").height()<$(window).height())
loadmore($(window));
else
clearInterval(setdefult);
},500);
//加载完
function loadover(){
if(sover==1)
{
var overtext="—————————我— — —是— — —有— — —底— — —线— — —的—————————";
$(".loadmore").remove();
if($(".loadover").length>0)
{
$(".loadover span").eq(0).html(overtext);
}
else
{
var txt='<div class="loadover"><span>'+overtext+'</span></div>'
$("body").append(txt);
}
}
}
//加载更多
function loadmore(obj) {
if(finished==0 && sover==0)
{
var scrollTop = $(obj).scrollTop();
var scrollHeight = $(document).height();
var windowHeight = $(obj).height();
if($(".loadmore").length==0)
{
var txt='<div class="loadmore"><span class="loading"></span>加载中..</div>'
$("body").append(txt);
}
var sign = false;
if (scrollTop + windowHeight - scrollHeight >= 0) {
sign = true;
var result = "";
//此处是滚动条到底部时候触发的事件，在这里写要加载的数据，或者是拉动滚动条的操作,sign标志ajax是否执行
if (sign) {
//防止未加载完再次执行
finished = 1;
$.ajax({
url: "../Following/getJsonFollowingResult?customerNumber=" +@ViewBag.customerNumber+"&pageCount=" +@ViewBag.pageCount+"&pageIndex=" + page,
type: "get",
async:false,
success: function (data) {
if (Number(JSON.stringify(data.rows.length)) > 0) {
$.each(data.rows, function (i, item) {
var strdate;
if (item.recorddate.substr(0, 4) == @DateTime.Today.Year.ToString()) {
strdate = "<span class=\"timelabelcontent\">" + item.recorddate.substr(5) + "</span>";
}
else {
strdate = "<span class=\"pretimelabelcontent\">" + item.recorddate + "</span>";
}
result += "<div class=\"record\" id=\"record\">" +
"<div class=\"comment-item-time\">" +
" <div class=\"line\">" +
"<div class=\"timesign\"></div>" +
"<div class=\"clear\"></div>" +
"</div>" +
"<div class=\"timelabel\">" +
"<div class=\"triangle\" style=\"z-index:-9\"></div>" +
strdate +
"<div class=\"clear\"></div>" +
"</div>" +
"</div>"
$.each(item.recordlst, function (j, k) {
var ass = "data:image/png;base64," + k.EmployeePhotos;
var CustomerCategoryName = ""
if (k.CustomerCategoryName == "null") {
CustomerCategoryName = " <span style=\"font-size:14px;\"> " + k.CustomerCategoryName + " : " + k.CustomerCategoryText + "</span>";
}
result += "<div class=\"comment-item\" name=\"" + k.TrackingNumber + "\">" +
"<div class=\"line\">" +
"<div class=\"contentsign\"><i class=\"fa fa-edit\"></i></div>" +
"<div class=\"clear\"></div>" +
"</div>" +
"<div class=\"content\">" +
"<div class=\"triangle\"></div>" +
"<div class=\"contentcontent\">" +
"<div class=\"contentpanel\">" +
"<span></span>" +
"<span class=\"contentname\"><img src=" + ass + " class=\"employeephote\" /><strong>" + k.EmployeeName + "</strong>" + CustomerCategoryName + "</span>" +
"<span class=\"contenttime\">" + k.TrackingDateTime.substr(11) + "</span>" +
"<div style=\"clear:both\"></div>" +
"<div class=\"contentRemark\">" + k.TrackingRemark + " </div>" +
"<div></div>" +
"</div>" +
"</div>" +
"<div class=\"clear\"></div>" +
"</div>" +
"</div>"
})
result += "</div>"
})
} else
{
loadover();
}
},
error: function () {
loadover();
}
})
}
setTimeout(function(){
//$(".loadmore").remove();
$('.container').append(result);
finished=0;
//最后一页
if(page==@ViewBag.totalPage)
{
sover=1;
loadover();
};
page += 1;
twoitemclick();
}, 1000);
}
}
}
//页面滚动执行事件
window.onscroll =function (){
loadmore($(this));
};
////comment-item添加点击事件
//window.onload = itemclick();
//function itemclick() {
// var contentitem = document.getElementsByClassName('comment-item');
// var i
// for (i = 0; i < contentitem.length; i++) {
// //初始选中第一个
// contentitem[0].style.backgroundColor = "#00A5FF";
// var pval = document.getElementById('PassValue_TrackingNumber');
// pval.innerHTML = contentitem[0].getAttribute("name");
// (function (i) {
// var ss = contentitem[i];
// ss.onclick = function () {
// for (var j = 0; j < contentitem.length; j++) {
// contentitem[j].style.backgroundColor = null;
// }
// contentitem[i].style.backgroundColor = "#00A5FF";
// var pval = document.getElementById('PassValue_TrackingNumber');
// pval.innerHTML = contentitem[i].getAttribute("name");
// }
// })(i)
// }
//}
//加载更多后的点击事件
function twoitemclick() {
var contentitem = document.getElementsByClassName('comment-item');
var i
for (i = 0; i < contentitem.length; i++) {
//初始选中第一个
contentitem[0].style.backgroundColor = "#00A5FF";
var pval = document.getElementById('PassValue_TrackingNumber');
pval.innerHTML = contentitem[0].getAttribute("name");
(function (i) {
var ss = contentitem[i];
ss.onclick = function () {
for (var j = 0; j < contentitem.length; j++) {
contentitem[j].style.backgroundColor = null;
}
contentitem[i].style.backgroundColor = "#00A5FF";
var pval = document.getElementById('PassValue_TrackingNumber');
pval.innerHTML = contentitem[i].getAttribute("name");
}
})(i)
}
}
</script>
网友评论