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

    感谢各位朋友的指导~

  • 相关阅读:
    yum安装Mysql
    在Centos上安装xtrabackup,对Mysql做备份
    Linux下使用yum安装Mysql之后,无法登陆mysql
    手动产生replication中的系统SP
    MySQL全面瓦解1:安装部署与准备
    开发笔记:PDF生成文字和图片水印
    调试与优化:一次数据中心看板 T+1 改 T+0 优化过程
    MySQL:SELECT COUNT 小结
    系统架构设计:平滑发布和ABTesting
    linux /dev/mapper/centos-root目录莫名其妙被占满
  • 原文地址:https://www.cnblogs.com/beileixinqing/p/7771327.html
Copyright © 2011-2022 走看看