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

2018-06-24 00:40:34来源：未知阅读 ()

将方法写出来，销毁在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事件，原因如下：

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

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

感谢各位朋友的指导~

标签：

版权申明：本站文章部分自网络，如有侵权，请联系：west999com@outlook.com
特别注意：本站所有转载文章言论不代表本站观点，本站所提供的摄影照片，插画，设计作品，如需使用，请与原作者联系，版权归原作者所有