<script>
// 无限滚动加载
function scrollLoad() {
let page = 1;
let limit = 10;
let flag = true;
//渲染数据
function renderData(data) {
if (data.code) {
let list = data.result.data;
console.log(list)
let htmlStr = '';
for (let i =0;i<list.length;i++){
htmlStr +='<li class="list"><a href="'+list[i].url +'" class="item">'+list[i].showTitle+'</a><p class="item-time">'+list[i].dateStr+'</p></li>'
}
let ulEle = document.querySelector('.content ul')
ulEle.innerHTML += htmlStr;
flag = true;
**## //这里优化,当数据小于你设定的limit时不再发送ajax请求**
if(data.result.data.length < limit){
console.log("over")
$(".content ul").append("<li class='over'>加载完毕</li>")
flag=false;
}
}
}
//发起ajax请求
function sendAjax(page,limit) {
var columnId = "${columnId}" == "" ? -1 : Number("${columnId}");
var params = {
page: page,
size: limit,
wheres: {
columnCode: "${columnCode}",
columnId: "${columnId}" == "" ? -1 : Number("${columnId}"),
specialName: "",
columnName: "",
contributorTime_start: "",
contributorTime_end: "",
title: "${queryStr}",
units: "",
organizationId: "${organizationId}"
}
}
$.ajax({
url: "/static/columnPage?_model=" + encodeURI(JSON.stringify(params)),
type: 'get',
data: {
page,
limit
},
dataType: 'json',
// loadding显示
beforeSend:function(){
layer.load(2); //又换了种风格,并且设定最长等待10秒
},
success:function(data) {
console.log(data)
layer.close(layer.load(2));
renderData(data);
}
})
}
//页面初始化时,请求10条商品信息
function init() {
sendAjax(page,limit);
}
//当页面滚动到底部时加载新数据
function scroll() {
**//这里的content ul 可以替换成任何你想要滚动的对象元素**
let clientHeight = document.querySelector('.content ul').clientHeight;
let eleScroll=document.querySelector('.content ul');
eleScroll.onscroll = function () {
let scrollTop = eleScroll.scrollTop;
let scrollHeight = eleScroll.scrollHeight;
if (scrollTop + clientHeight > scrollHeight - 5) {
// 发起新的请求
if (flag) {
page++;
sendAjax(page,limit)
flag = false;
}
}
}
}
init();
scroll();
}
scrollLoad();
</script>
无限滚动加载优化2
最新推荐文章于 2024-04-21 09:58:22 发布