Vue 滚动到底部触发事件 (防抖节流)
Vue 滚动到底部触发事件 (防抖节流)
·
绑定滚动事件
this.debounce 是节流方法的名字
this.handleScroll 则是页面滚动事件
mounted() {
document.addEventListener('scroll', this.debounce(this.handleScroll, 500))
},
注意:在离开页面的时候,也就是执行生命周期函数的销毁,要记得销毁scroll的方法
因为我们在这里使用的document全局节点绑定的
destroyed(){
window.removeEventListener('scroll', this.handleScroll);
},
滚动事件
handleScroll(){
let scrollTop=document.documentElement.scrollTop//滚动条在Y轴滚动过的高度
let scrollHeight=document.documentElement.scrollHeight//滚动条的高度
let clientHeight=document.documentElement.clientHeight//浏览器的可视高度
if(scrollTop + clientHeight == scrollHeight){
console.log('触底了');
}
},
防抖节流方法
0.5秒内 去触发一次,这样子就不会马上去触发
debounce(fn, delay) {
let timer = null; // 借助闭包
return function () {
if (timer) {
clearTimeout(timer);
}
timer = setTimeout(fn, delay); // 简化写法
};
},
更多推荐
已为社区贡献5条内容
所有评论(0)