现在越来越多的PC端也开始做上拉到底部加载更多了....那么我们这里通过mixin进行封装实现一下
要先在页面有个滚动到底部的执行方法(我这里起名叫onPageScroll)
内部可以做一些处理,我这里是加了一个滚动到底部的条件
export const scrollEvent = {
methods: {
onScroll(){
// 变量scrollTop是滚动条滚动时,距离顶部的距离
var scrollTop =
document.documentElement.scrollTop ||
document.body.scrollTop;
// 变量windowHeight是可视区的高度
var windowHeight =
document.documentElement.clientHeight ||
document.body.clientHeight;
// 变量scrollHeight是滚动条的总高度
var scrollHeight =
document.documentElement.scrollHeight ||
document.body.scrollHeight;
// 滚动条到底部的条件
if (scrollTop + windowHeight == scrollHeight) {
// 滚动到底部 调用页面方法
this.onPageScroll && this.onPageScroll();
}
}
},
mounted() {
window.addEventListener('scroll', this.onScroll)
},
destroyed() {
window.removeEventListener('scroll', this.onScroll, false);
},
}