绑定滚动事件
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); // 简化写法
  };
},
Logo

前往低代码交流专区

更多推荐