vue如何正确销毁当前组件的scroll事件？

将方法写出来，销毁在beforeDestroy写。

mounted(){
  window.addEventListener("scroll",this.handleFun),
},
methods:{
  handleFun(){
    let t = document.documentElement.scrollTop || document.body.scrollTop;
      let tabBar = document.getElementById("tabBar");
      if( t >= 88 ) {
        tabBar.style.cssText="position:fixed;top:0;z-index:999";
      } else {
        tabBar.style.position="relative";
      }
  }
},
beforeDestroy(){
  window.removeEventListener("scroll",this.handleFun)
}

以下几种方法同样有效：

//把scroll的匿名函数挂到this上

mounted(){
      this.tabScroll();
    },
methods:{
  tabScroll(){
      this.scroll_ = function () {
        let t = document.documentElement.scrollTop || document.body.scrollTop;
        console.log(t);
        let tabBar = document.getElementById("tabBar");
        if( t >= 88 ) {
          tabBar.style.cssText="position:fixed;top:0;z-index:999";
        } else {
          tabBar.style.position="relative";
        }
      }
      window.addEventListener("scroll",this.scroll_);
    },
},
destroyed(){
      window.removeEventListener("scroll",this.scroll_);
    }

methods:{
  tabScroll(){
      window.addEventListener("scroll",this.handleScroll);
  },
  handleScroll(){
        let t = document.documentElement.scrollTop || document.body.scrollTop;
        console.log(t);
        let tabBar = document.getElementById("tabBar");
        if( t >= 88 ) {
          tabBar.style.cssText="position:fixed;top:0;z-index:999";
        } else {
          tabBar.style.position="relative";
        }
  }
},
mounted(){
      this.tabScroll();
},
beforeDestroy(){
    window.removeEventListener("scroll",this.handleScroll);
}

这里有一点需要注意：

给vue组件绑定scroll事件，如果直接在 mounted钩子中写window.addEventListener("scroll",handleFun()),
则页面并不会执行scroll事件，原因如下：

1. 要销毁handleFun的话，得把handleFun写在method中
2. 应该是window.addEventListener("scroll",this.handleFun)和window.removeEventListener("scroll",this.handleFun)，　　
3. 而不是window.addEventListener("scroll",this.handleFun())和window.removeEventListener("scroll",this.handleFun())

第二个参数应该是一个function，而不是执行它。

 

感谢各位朋友的指导~

转载于:https://www.cnblogs.com/beileixinqing/p/7771327.html