原理:手往上拉的 时候,当拉到距离底部200(一定距离的时候),开始加载数据
clientHeight(可视区高度)+ scrollTop (内容向上滚动的高度)+ 200(距离底部的高度,可变) >= scrollHeight
//=>开始展示第一页的内容
isRun =false;//开关,是否正在加载数据
queryData();//首次加载数据
//=>下拉加载更多数据
$(window).on('scroll', () => {
let {
clientHeight,
scrollTop,
scrollHeight
} = document.documentElement;
if ((clientHeight + scrollTop + 200) >= scrollHeight) {
//=>即将到达页面底部:加载更多数据
//正在加载中是不允许加载新的数据化的
//如果已经把所有数据都加载完成了,也不再继续加载了
if (isRun) return;
if (page >= pageNum) return;
isRun = true;//打开开关
page++;
queryData();
}
});