列表页面经常需要下拉加载这样一个需求。
前端常用的东西,我这种菜鸡前端当然是要记录下来的~~
原理
监听页面滚动事件,判断页面是否将近浏览器底部,是则加载更多数据。
(判断语句:scrollTop + clientHeight >= scrollHeight)
小编多嘴提一句,前端有几个宽高我们得搞清楚:
【本图出自】【分辨这些宽高可参考文章】
动手实现
mounted() {
// 事件监听
window.addEventListener("scroll", this.listenBottomOut);
},
destroyed() {
// 离开页面取消监听
window.removeEventListener("scroll", this.listenBottomOut, false);
},
methods: {
// 触底触发函数
listenBottomOut() {
const scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
const clientHeight = document.documentElement.clientHeight;
const scrollHeight = document.documentElement.scrollHeight;
if (scrollTop + clientHeight >= scrollHeight) {
console.log("触底了~");
// 此处可以调用获取数据的方法
}
},
}