一、实现原理
- a=152 代表dom顶部距离page顶部的距离
- b=800 代表dom的高度
- d 表示滚动条的滚动的高度,此时没有滚动,即d=0
- c 表示scrollerHeight 即最外层容器的高度
- offset 可以自定义设定,表示距离底部多少时请求下一页数据。
再来看图二:
此时滚动条向下滚动了50
a=152
b=800
c=852
d=50
如果我们设定this.offset=55
计算公式:a-d+b-c = 152-50+800-852=50 < 55
所以此时可以触发加载新内容.
二、原生 js + jq 代码
javascript">/* 分页接口 */
function getData(page, limit, type) {
// 这里也就是原生Ajax,只不过我封装了一下
Util.Fetch({
url: Util.OPENAPI + '/customer/v1.0/cabinet/get-order-page',
data: { currentPage: page, pageSize: limit },
cbOk: function (res) {
var list = res.responseBody.data.list
if (!list) {
return false
}
if (list.length==0) {
Util.toast("暂无数据!");
return;
} else {
for (i = 0; i < list.length; i++) {
var item = list[i]
// 把定义好的模板放在循环中列表中,依次追加到页面 dom元素上。
var template = `
<div class="content">
<div class="content_top">
<span>${item.location}</span>
<span>${item.clearWeight}kg</span>
</div>
<div class="content_bottom">${item.createdTime}</div>
</div>
`
$('#list').append(template)
}
if (list.length < limit) {
// Util.toast('已到底部!');
window.isEnd = true;
return;
}
}
},
cbErr: function () {
Util.toast("加载失败,请检查网络...");
}
})
},
/* 分页方法 */
function pageList() {
var _this = this
//判断什么时候加载更多
var type = 1; //第一页
var limit = 10; //一页显示几条
_this.getData(1, limit, type); //初始化
var winH = $(window).height(); //页面可视区域高度
var loading = false; //状态标记 是否要加载
window.page = 2; //page从2加开始
window.isEnd = false; //是否加载结束状态
$(window).scroll(function () {
var scrollT = $(window).scrollTop(); //滚动条top
var pageH = $(document.body).height();//body高度
var aa = pageH - winH - scrollT;
if (isEnd) { //判断是否到底
return;
}
if (isEnd == false && aa < 50) {
if (loading) return;
_this.getData(page, limit, type);
window.page++;
loading = true;
} else {
loading = false;
}
});
},