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,而不是执行它。

    感谢各位朋友的指导~

  • 相关阅读:
    随便玩玩Microsoft Test Manager
    SharePoint 2013 安装指南
    使用Napa开发工具创建app 开始构建SharePoint app系列
    Displaying files from a specific folder using SPDataSource
    当把鼠标放上去以后呈手型代码
    asp.net中嵌入日历控件代码
    ado.net中带有用户名及密码的数据库连接字符串
    用OnClientClick事件中实现跳转
    asp.net中生成动态验证码代码
    asp.net中加入收藏及设为首页代码
  • 原文地址:https://www.cnblogs.com/beileixinqing/p/7771327.html
Copyright © 2011-2022 走看看