$(function () {
let flag = true;
// 首次请求渲染列表
let res = ajaxRequest(``, {
})
renderList(res)
// 屏幕滚动触发事件(懒加载)
window.onscroll = function () {
let scrollTop = document.documentElement.scrollTop; // 获取滚动条的位移
let scrollHeight = document.body.scrollHeight; // 获取内容的高度
let clientHeight = document.documentElement.clientHeight // 获取屏幕高度
if (clientHeight + scrollTop >= scrollHeight && flag) {
console.log(clientHeight, scrollTop)
flag = false;
// 获取数据
$('.tips').html('努力加载中....')
let res = ajaxRequest(``, {
})
renderList(res)
flag = true
}
}
// 渲染封装
function renderList(res) {
if (res.length > 0) {
// 渲染数据
$('#lists').append(`
<div class="lists-item">
<div class="name">
开发大队
</div>
<div class="dw">
<div class="dw-alls">
单位数: 123
</div>
<div class="dw-online">
在线单位数: 123
</div>
</div>
</div>
`)
} else {
$('.tips').html('没有更多了')
}
}
})
懒加载的案例
最新推荐文章于 2022-03-08 21:55:15 发布