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
事件,原因如下:
- 要销毁
handleFun
的话,得把handleFun
写在method
中 - 应该是
window.addEventListener("scroll",this.handleFun)
和window.removeEventListener("scroll",this.handleFun)
, - 而不是
window.addEventListener("scroll",this.handleFun())
和window.removeEventListener("scroll",this.handleFun())
第二个参数应该是一个function,而不是执行它。
vue如何正确销毁当前组件的scroll事件?的更多相关文章
- Vue中如何监听组件的原生事件
在首页开发中,右下角有一个返回顶部的小箭头,将它单独封装成一个BackTop组件,但是它何时出现需要依赖于首页的滑动,即另外一个Scroll组件.如果直接在BackTop组件里面监听,则需要通过thi ...
- Vue中调用另一个组件中自定义事件
之前在一个场景中,遇到组件需要调用父组件中的方法tableInit(),字组件调用父组件常用的有三种方法,具体参考:https://www.cnblogs.com/jin-zhe/p/9523782. ...
- asp.mvc中的vue分页实例,分页组件无法重置reload,解决点击查询按钮后,分页不刷新的问题
刚刚接触Vue.js,现在需要做一个查询功能,并且进行服务端分页.主要思路是在页面中注册一个分页组件,然后进行调用.代码如下 1.引用vue.js,具体去网上下载 2.在html的body中添加如下代 ...
- vue技术解析二之组件通信
--------------------------动画效果----------------------------------- <transition name="router-f ...
- Vue(十五)组件
一. 组件component 1. 什么是组件? 组件(Component)是 Vue.js 最强大的功能之一.组件可以扩展 HTML 元素,封装可重用的代码 组件是自定义元素(对象) 2. 定义组件 ...
- python 全栈开发,Day91(Vue实例的生命周期,组件间通信之中央事件总线bus,Vue Router,vue-cli 工具)
昨日内容回顾 0. 组件注意事项!!! data属性必须是一个函数! 1. 注册全局组件 Vue.component('组件名',{ template: `` }) var app = new Vue ...
- vue 中scroll事件不触发问题
在vue项目中需要监听滚动条滚动的位置,结果写了scroll监听事件就是不生效,最后查资料发现是页面有样式设置了over-flow:scroll,去掉之后完美解决.(页面样式中存在over-flow: ...
- Vue简单基础 + 实例 及 组件通信
vue的双向绑定原理:Object.defineProperty() vue实现数据双向绑定主要是:采用数据劫持结合发布者-订阅者模式的方式,通过 Object.defineProperty() 来劫 ...
- Vue一个案例引发的动态组件与全局事件绑定总结
最近在自学 Vue 也了解了一些基本用法,也记录了一些笔记有兴趣的朋友可以去查看我的其他文章,技术这东西真的不能光靠看,看是没有的,你必须要动手实践,只有在实战项目中才能发现问题,才能发现我们没有掌握 ...
随机推荐
- poj 2482 Stars in Your Window (线段树扫描线)
题目大意: 求一个窗体覆盖最多的星星的权值. 思路分析: 每个星星看成 左下点为x y 右上点为x+w-1 y+h-1 的矩形. 然后求出最大覆盖的和. #include <cstdio> ...
- mongo源码学习(三)请求接收传输层
在上一篇博客中(mongo源码学习(二)db.cpp之mongoDbMain方法分析),我们把db.cpp中的mongoDbMain的执行过程分析了一下,最后会调用initAndListen(serv ...
- 线程的几种状态转换<转>
线程在一定条件下,状态会发生变化.线程一共有以下几种状态: 1.新建状态(New):新创建了一个线程对象. 2.就绪状态(Runnable):线程对象创建后,其他线程调用了该对象的start()方法. ...
- 【转】一篇文章读懂人力资源三支柱体系(COE・BP・SSC)
通过人力资源转型,提升效率和效能 作者:Sharon Li,翰威特大中华区咨询总监. 杰克韦尔奇曾说过“人力资源负责人在任何企业中都应该是第二号人物”,但在中国,99%的企业都做不到.原因很简单, ...
- hbase源码系列(九)StoreFile存储格式
从这一章开始要讲Region Server这块的了,但是在讲Region Server这块之前得讲一下StoreFile,否则后面的不好讲下去,这块是基础,Region Sever上面的操作,大部分都 ...
- SVN和IntelliJ IDEA忽略node_module设置
SVN提交忽略node_modules 1.空白处右键>选中TortoiseSVN>设置(settings) 2.常规设置(General)>Subversion>编辑(edi ...
- node学习笔记2——搭建服务器
搭建服务器关键词: require('http') —— 请求 node 里面的 http 模块 createServer —— 创建一个服务器 request —— 请求 response—— 响应 ...
- JAVASCRIPT 之escape 介绍
escape() 方法:采用ISO Latin字符集对指定的字符串进行编码.所有的空格符.标点符号.特殊字符以及其他非ASCII字 符都将被转化成%xx格式的字符编码(xx等于该字符在字符集表里面的编 ...
- 摄像头驱动0V7725学习笔记连载(三):0V7725 SCCB时序的实现
上一篇博客主要是讲解了关于需要配置的重要寄存器,那么接下来就是要通过SCCB接口实现对OV7725的配置.参考<OmniVision Serial Camera Control Bus (SCC ...
- 第三百四十一节,Python分布式爬虫打造搜索引擎Scrapy精讲—编写spiders爬虫文件循环抓取内容—meta属性返回指定值给回调函数—Scrapy内置图片下载器
第三百四十一节,Python分布式爬虫打造搜索引擎Scrapy精讲—编写spiders爬虫文件循环抓取内容—meta属性返回指定值给回调函数—Scrapy内置图片下载器 编写spiders爬虫文件循环 ...