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

感谢各位朋友的指导~

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏编程语言

iOS:宏定义(项目初期配置)(一)

20920
来自专栏技术总结

教你如何自定义AlertView

39250
来自专栏老司机的简书

老司机出品———疯狂造轮子之滑动验证码

消失了好久,大家放心,我还活着。 要问我为什么消失了这么久,如果你知道什么叫封闭开发或许你会懂我。

27530
来自专栏TechBox

史上最全的iOS之UITextView实现placeHolder占位文字的N种方法前言方法一方法二方法三方法四方法五

24130
来自专栏coding...

iOS开发实战-时光记账Demo 本地数据库版效果分析Demo地址

由于主页只是一个展示的时光轴界面,UIScrollView加几个按钮就能完成,需要读取数据库内容,所以我们先把内页-增加账单 完成。

13620
来自专栏Python疯子

Swift -标签页控制器(UITabBarController)用法

Simulator Screen Shot 2016年11月8日 19.11.36.png

71720
来自专栏freesan44

ios实战-runloop实现的同步弹窗

我们知道UIAlertView使用delegate返回数据实现的,使用麻烦,之前介绍过用Block实现的例子《ios实战-使用Block的UIAlertView...

14420
来自专栏Python疯子

UITableViewCell自适应网络不规则图片和文字组合的高度

有时我们会需要对cell的图片和文字进行显示并完美自适配其大小,下面用我有限的知识做了个适配,看着好像还能用,哈哈 直接上code 001 在tablev...

35520
来自专栏一个爱瞎折腾的程序猿

js实用方法记录-指不定哪天就会用到的js方法

8810
来自专栏iOS122-移动混合开发研究院

Colours–颜色库,包含100种预定义的颜色和方法

简介 Colours–颜色库,包含各种100种预定义的颜色和方法,可以简化颜色相关的开发工作. 最新示例: 点击下载 快速入门 安装 通过Cocoapods安装...

43580

扫码关注云+社区

领取腾讯云代金券