将方法写出来,销毁在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,而不是执行它。

感谢各位朋友的指导~

vue如何正确销毁当前组件的scroll事件?的更多相关文章

  1. Vue中如何监听组件的原生事件

    在首页开发中,右下角有一个返回顶部的小箭头,将它单独封装成一个BackTop组件,但是它何时出现需要依赖于首页的滑动,即另外一个Scroll组件.如果直接在BackTop组件里面监听,则需要通过thi ...

  2. Vue中调用另一个组件中自定义事件

    之前在一个场景中,遇到组件需要调用父组件中的方法tableInit(),字组件调用父组件常用的有三种方法,具体参考:https://www.cnblogs.com/jin-zhe/p/9523782. ...

  3. asp.mvc中的vue分页实例,分页组件无法重置reload,解决点击查询按钮后,分页不刷新的问题

    刚刚接触Vue.js,现在需要做一个查询功能,并且进行服务端分页.主要思路是在页面中注册一个分页组件,然后进行调用.代码如下 1.引用vue.js,具体去网上下载 2.在html的body中添加如下代 ...

  4. vue技术解析二之组件通信

    --------------------------动画效果----------------------------------- <transition name="router-f ...

  5. Vue(十五)组件

    一. 组件component 1. 什么是组件? 组件(Component)是 Vue.js 最强大的功能之一.组件可以扩展 HTML 元素,封装可重用的代码 组件是自定义元素(对象) 2. 定义组件 ...

  6. python 全栈开发,Day91(Vue实例的生命周期,组件间通信之中央事件总线bus,Vue Router,vue-cli 工具)

    昨日内容回顾 0. 组件注意事项!!! data属性必须是一个函数! 1. 注册全局组件 Vue.component('组件名',{ template: `` }) var app = new Vue ...

  7. vue 中scroll事件不触发问题

    在vue项目中需要监听滚动条滚动的位置,结果写了scroll监听事件就是不生效,最后查资料发现是页面有样式设置了over-flow:scroll,去掉之后完美解决.(页面样式中存在over-flow: ...

  8. Vue简单基础 + 实例 及 组件通信

    vue的双向绑定原理:Object.defineProperty() vue实现数据双向绑定主要是:采用数据劫持结合发布者-订阅者模式的方式,通过 Object.defineProperty() 来劫 ...

  9. Vue一个案例引发的动态组件与全局事件绑定总结

    最近在自学 Vue 也了解了一些基本用法,也记录了一些笔记有兴趣的朋友可以去查看我的其他文章,技术这东西真的不能光靠看,看是没有的,你必须要动手实践,只有在实战项目中才能发现问题,才能发现我们没有掌握 ...

随机推荐

  1. [转]java利用AES实现URL的参数加密

    原文地址:http://h5566h.iteye.com/blog/1465426 很多时候需要在URL传参,希望URL参数能够加密,这里我结合了文章http://www.2cto.com/kf/20 ...

  2. iOS中 语音识别功能/语音转文字教程具体解释 韩俊强的博客

    原文地址:http://blog.csdn.net/qq_31810357/article/details/51111702 前言:近期研究了一下语音识别,从百度语音识别到讯飞语音识别:首先说一下个人 ...

  3. Scala 中的构造器

    Scala上的从构造器也有一定的限制,Scala编程中写道. “Scala 里的每一个从构造器的第一个动作都是调用同一个类里面其他的构造器.换句话说 就是,每个 Scala 类里的每个从构造器都是以“ ...

  4. Linux 下 less 命令

    less 命令功能强大,上能搜索,下能动态加载查看日志,并且每一屏内容都是预加载,不会加载整个文件,所以不会由于搜索内容过多把机器卡死 语法 less [参数] 文件地址 参数说明 -N:显示行号 f ...

  5. 树莓派3B+首次登陆通过网络

    树莓派3B+默认串口不能登录,即使可使用可需要通过连线方式连接,如何才能直接通过网络ssh登录树莓派呢? 串口问题及使用 树莓派3的UART串口的使用问题,该串口问题的官方反馈及回复请参考这两篇官方博 ...

  6. java 集合排序

    Java API针对集合类型排序提供了两种支持:java.util.Collections.sort(java.util.List)java.util.Collections.sort(java.ut ...

  7. FormWindowState.Maximized的陷阱

    MDI父窗体下面有很多子窗体.子窗体打开时都是以FormWindowState.Maximized的属性打开的,但是结果部分如意,部分奇怪. 先贴上单实例的代码: static TestForm _s ...

  8. 25个最常用的iptables策略

    1.清空存在的策略当你开始创建新的策略,你可能想清除所有的默认策略,和存在的策略,可以这么做:iptables -F  或者iptables --flush2,设置默认策略默认链策略是ACCEPT,改 ...

  9. oozie 重新提交作业

    在oozie的运行过程当中可能会出现错误,比如数据库连接不上,或者作业执行报错导致流程进入suspend或者killed状态,这个时候我们就要分析了,如果确实是数据或者是网络有问题,我们比如把问题解决 ...

  10. Hbase 学习(九) 华为二级索引(原理)

    这个是华为的二级索引方案,已经开放源代码了,下面是网上的一篇讲解原理的帖子,发出来和大家共享一下. 经过本人认真阅读了一下代码,发现这个源码仅供参考,想要集成到原有的集群当中是有点儿难度的,它对hba ...