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

Question

mounted(){
      this.tabScroll();
    },
methods:{
  tabScroll(){
      window.addEventListener("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";
        }
      });
    },
},

给vue组件绑定scroll事件，如果直接在 mounted钩子中写window.addEventListener("scroll",handleFun()),
则页面并不会执行scroll事件，仅仅在页面打开的一刹那生效，所以把绑定事件的方法写在methods中，可以正擦汗那个监听滚动，但是试了好几种销毁方式都不可行，求大神解惑~~！

destroyed(){
      window.removeEventListener("scroll",function () {
        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";
        }
      });
    }

destroyed()中直接这么写不管用，如果把里面的函数单独写成methods中的一个方法，写到删除事件中，也一样不生效。

Answer 1

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

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

Answer 2

将方法写出来，销毁在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)
}

Answer 3

把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_);
    }

Answer 4

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);
}

Answer 5

在滚动区域直接加scorll的事情，vue可以支持，不用销毁了，试试吧

Answer 6

你自己写的事件监听需要销毁。v-on可以绑定滚动事件，不用销毁