zoukankan      html  css  js  c++  java
  • 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,而不是执行它。

    感谢各位朋友的指导~

  • 相关阅读:
    转: 分布式系统编程,你到哪一级了?
    window屏幕朝向的调整 Alt + Ctrl + 上下左右箭头
    win10的安装与下载
    Zookeeper的学习材料
    配置文件的格式选型
    转: YAML 语言教程 from(阮一峰)
    Eclipse的 JSON Edit插件
    转: 如何为你的开源项目选择一个合适的开源协议?
    在Eclipse中使用SVN插件subclipse的教程
    我们在呼唤上帝还是在召唤恶魔——警惕人工智能
  • 原文地址:https://www.cnblogs.com/beileixinqing/p/7771327.html
Copyright © 2011-2022 走看看