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 也了解了一些基本用法,也记录了一些笔记有兴趣的朋友可以去查看我的其他文章,技术这东西真的不能光靠看,看是没有的,你必须要动手实践,只有在实战项目中才能发现问题,才能发现我们没有掌握 ...
随机推荐
- Git克隆部分文件
克隆部分文件html, body {overflow-x: initial !important;}.CodeMirror { height: auto; } .CodeMirror-scroll { ...
- <孙阿姨炒股记:3500元炒出千万身家的股市智慧 >读书笔记
书在这里 个人投资者要想在中国股市上生存,并且获利,首先要“胆子小” 国家方针政策要花力气去研究 不要听小道消息,比较天下没有免费的午餐 好公司不一定就能赚钱,好的买点药抓住,好的卖点更要抓住 趋势是 ...
- iframe中跨域页面访问parent的方法
背景 如上图所示,系统www.a.com/index.html页面中嵌入一个iframe,iframe中访问不同域的www.b.com/index.html 然后b中有个按钮“保存”,想调用父页面a. ...
- java json转换
https://blog.csdn.net/WillJGL/article/details/77866224 SpringBoot中如果需要实现json的序列化和反序列化,我们会使用json解析工具. ...
- pdf ppt word office转图片 教学白板
https://zh-cn.libreoffice.org/ http://www.imagemagick.org/script/ 首先用libreoffice将ppt转换为pdf格式,然后再用con ...
- 【SIP协议】学习初学笔记
1.SIP这玩意是怎么走来和如何构建的? 通俗的说,SIP就是一个轻量级信令协议,它可以作为音频.视频.及时信息的信令. 说到SIP是怎么出来的就要提H.323,而提到这个标准由不得不提到ITU-T, ...
- MapReduce 图解流程超详细解答(1)-【map阶段】
转自:http://www.open-open.com/lib/view/open1453097241308.html 在MapReduce中,一个YARN 应用被称作一个job, MapReduc ...
- Ubuntu下qemu环境搭建
在查找资料过程中,发现自己搭建虚拟的arm环境的话,有一个比较好的软件就是qemu了,当然还有其他的,大家各投所好就好. 接下来说一下qemu环境搭建过程. 其实搭建很简单,作为小白,我还是捣鼓了两三 ...
- 关于Unity中的刚体和碰撞器的相关用法(二)
在关于Unity中的刚体和碰撞器的相关用法(一)的基础上 有一个plane平面,一个ball球体,都挂了碰撞器,ball挂了刚体Rigidbody,写了一个脚本ball挂载在球体上,球体从空中落下装机 ...
- 关于1KB病毒的清除
以前中过很多次的1KB病毒,这种病毒来源一般都是U盘,就是去打印店插个U盘,回来插自己电脑发现U盘中毒了. 中毒特征就是根目录下的所有文件夹都变成快捷方式,都只有1KB大小,而根目录下的文件和压缩包不 ...