在项目开发中PC实现页面滚动加载数据,特记录
- 进页面监听页面滚动事件
mounted() {
window.addEventListener("scroll", this.lazyLoad);
}
- 在methods中写对应方法
lazyLoad() {
// 滚动到底部,处理事件,获取 可视区高度`、`滚动高度`、`页面高度`
let scrollTop =
document.documentElement.scrollTop || document.body.scrollTop;
let clientHeight = document.documentElement.clientHeight;
let scrollHeight = document.documentElement.scrollHeight;
if (scrollTop + clientHeight >= (scrollHeight - 302)) {
// 这里做了处理防止多次触发,保证只执行一次
if(this.timer) return
this.timer= setTimeout(() => {
this.loadList();
this.timer = null
},500)
}
},
// 滚动加载
loadList() {
if (this.pages.page < this.pages.totalPage) {
this.pages.page = Number(this.pages.page) + 1;
//SendDataInfo即查询数据时的参数
this.SendDataInfo.page_no = this.pages.page;
this.getDataList();
}
},