react取消监听scroll事件
如果要移除事件addEventListener
的执行函数必须使用外部函数而不能直接使用匿名函数
错误写法:
// 这样写是移除不了滚动事件的
componentDidMount() {
// 添加滚动监听
window.addEventListener('scroll', ()=>{
console.log("滚动距离:",window.scrollY)
});
}
// 组件将要卸载,取消监听window滚动事件
componentWillUnmount(){
window.removeEventListener('scroll', ()=>{
console.log("滚动距离:",window.scrollY)
});
}
正确写法:
componentDidMount() {
// 添加滚动监听
window.addEventListener('scroll', this.scroll);
}
// 组件将要卸载,取消监听window滚动事件
componentWillUnmount(){
window.removeEventListener('scroll', this.scroll); } scroll1 = ()=>{
console.log("滚动距离:",window.scrollY)
}
react取消监听scroll事件的更多相关文章
- mui 怎样监听scroll事件的滚动距离
var scroll = mui('.mui-scroll-wrapper').scroll(); document.querySelector('.mui-scroll-wrapper' ).add ...
- Vue 爬坑之路(七)—— 监听滚动事件 实现动态锚点
前几天做项目的时候,需要实现一个动态锚点的效果 如果是传统项目,这个效果就非常简单.但是放到 Vue 中,就有两大难题: 1. 在没有 jQuery 的 animate() 方法的情况下,如何实现平滑 ...
- js 事件监听 冒泡事件
js 事件监听 冒泡事件 的取消 [自己写框架时,才有可能用到] <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitiona ...
- 两种js监听滚轮事件的方式
前段时间在写前端的时候,需要监听浏览器的滚轮事件 网上查了一下,找到两种监听滚轮事件的方法: 一.原生js通过window.onscroll监听 //window.onscroll = functio ...
- vue监听滚动事件,实现滚动监听
在vue中实现滚动监听和原生js无太大差异,下面是一个简单的demo,可在控制台查看结果 <!DOCTYPE html> <html lang="en"> ...
- vue监听滚动事件-元素固定位置显示
1.监听滚动事件 用VUE写一个在控制台打印当前的scrollTop用来测试是否执行: mounted () { window.addEventListener('scroll', this.hand ...
- vue监听滚动事件 实现某元素吸顶或者固定位置显示
https://blog.csdn.net/wang1006008051/article/details/78003974 1.监听滚动事件 利用VUE写一个在控制台打印当前的scrollTop, 首 ...
- vue监听滚动事件
vue中监听滚动事件,然后对其进行事件处理,一般有:1. 滚动到顶部吸附: 2. 根据滚动的位置激活对应的tab键(锚链接tab键) 这两种方式的处理都是可通过监听scroll来实现 mounted( ...
- Qt实现小功能之列表无限加载(创意很不错:监听滚动条事件,到底部的时候再new QListWidgetItem)
概念介绍 无限加载与瀑布流的结合在Web前端开发中的效果非常新颖,对于网页内容具备较好的表现形式.无限加载并没有一次性将内容全部加载进来,而是通过监听滚动条事件来刷新内容的.当用户往下拖动滚动条或使用 ...
随机推荐
- python爬虫批量抓取ip代理
使用爬虫抓取数据时,经常要用到多个ip代理,防止单个ip访问太过频繁被封禁.ip代理可以从这个网站获取:http://www.xicidaili.com/nn/.因此写一个python程序来获取ip代 ...
- Java Web学习总结(21)——http协议响应状态码大全以及常用状态码
http协议响应状态码大全以及常用状态码 当我们在浏览网页或是在查看服务器日志时,常会遇到3位数字的状态码,这3位数字是什么意思呢?其实,这3位数字是HTTP状态码,用来表示网页服务器HTTP响应状态 ...
- struts2的字符串参数
一定要熟记一个东西,一层引号的是变量,两层引号的是字符串 如"蓝"/'蓝'是变量,而" '蓝' "/ ' "蓝" '是字符串 打代码时要警惕 ...
- Zookeeper vs. etcd
etcd是go语言实现的. 对比,可以参考这篇文章: http://studygolang.com/articles/4837 <服务发现:Zookeeper vs etcd vs Consul ...
- WebView的截屏实现
WebView的截屏主要有两种实现方式: 方式1: bitmap = webView.getDrawingCache(); 可是,webView必需要mWebView.setDrawingCacheE ...
- 视图中使用ROWNUM要注意
昨天晚上帮一位兄弟优化一个ebs的sql. sql有好几百行. SQL的样子是select .... from 视图 where ....过滤条件 视图的代码贴出来就不给大家看了,比較长.另外设计保密 ...
- 再谈怎样以最简单的方法将泛型为String类型的集合或String类型的数组转化为逗号间隔字符串形式
今天review代码,看见某些大爷在将泛型为String类型的集合或String类型的数组转化为逗号间隔字符串形式时仍然仅仅顾结果不注重过程,"大爷"咱能负点责任吗? 将泛型为St ...
- 智课雅思词汇---三、aud和auto和bene是什么意思
智课雅思词汇---三.aud和auto和bene是什么意思 一.总结 一句话总结:aud:听 auto:自己,self bene:good,well 1.anthropo是什么意思? anthropo ...
- 73.node.js开发错误——TypeError: Cannot set property 'XXX' of undefined
转自:https://blog.csdn.net/fd214333890/article/details/53467429
- 关于router-link的传参以及参数的传递
1.路径:http://localhost:8081/#/test?name=1 <router-link :to="{path:'/test',query: {name: id}}& ...