vue监听scroll的坑的解决方法


Posted in Javascript onSeptember 07, 2017

最近开始用vue写个小项目,踩了不少坑,这里记录下爬坑过程,给有同样经历的人帮助。

问题

今天想在vue的项目里面用下拉加载,然后就直接写了:

vue监听scroll的坑的解决方法

但是我发现我切换路由以后依旧其他页面也触发了scrollHandler函数,然后我想到使用了vue-router做的spa项目,window对象不变的,所以需要在每次使用后销毁。

解决办法

我回去看了下vue文档的生命周期,看到了destroyed,然后直接在这个周期内销毁就可以了。

vue监听scroll的坑的解决方法

使用throttle出现的新问题

下拉加载一般需要配合throttle限流函数(原理可以看这里)来避免频繁触发,所以优化代码成这样:

vue监听scroll的坑的解决方法

然后发现没法用removeEventListener了,因为这个函数第二个参数不接受匿名函数。

最后代码

用一个变量中转下

vue监听scroll的坑的解决方法

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
js利用div背景,做一个竖线的效果。
Nov 22 Javascript
window.addEventListener来解决让一个js事件执行多个函数
Dec 26 Javascript
jquery map方法使用示例
Apr 23 Javascript
SeaJS 与 RequireJS 的差异对比
Dec 08 Javascript
JavaScript使用slice函数获取数组部分元素的方法
Apr 06 Javascript
jquery 中toggle的2种用法详解(推荐)
Sep 02 Javascript
AngularJS中过滤器的使用与自定义实例代码
Sep 17 Javascript
prototype与__proto__区别详细介绍
Jan 09 Javascript
gulp解决跨域的配置文件问题
Jun 08 Javascript
angularJs自定义过滤器实现手机号信息隐藏的方法
Oct 08 Javascript
vue中使用props传值的方法
May 08 Javascript
利用Angular7开发一个Radio组件的全过程
Jul 11 Javascript
react高阶组件经典应用之权限控制详解
Sep 07 #Javascript
React + webpack 环境配置的方法步骤
Sep 07 #Javascript
微信小程序之页面拦截器的示例代码
Sep 07 #Javascript
基于js粘贴事件paste简单解析以及遇到的坑
Sep 07 #Javascript
微信小程序实现轮播图效果
Sep 07 #Javascript
使用mint-ui开发项目的一些心得(分享)
Sep 07 #Javascript
JavaScript+CSS相册特效实例代码
Sep 07 #Javascript
You might like
第八节--访问方式
2006/11/16 PHP
PHP通用检测函数集合
2006/11/25 PHP
10条PHP高级技巧[修正版]
2011/08/02 PHP
Yii中CGridView关联表搜索排序方法实例详解
2014/12/03 PHP
php实现在服务器上创建目录的方法
2015/03/16 PHP
javascript 动态加载 css 方法总结
2009/07/11 Javascript
javascript 多种搜索引擎集成的页面实现代码
2010/01/02 Javascript
JS实现遮罩层效果的简单实例
2013/11/12 Javascript
Javascript图片上传前的本地预览实例
2014/06/16 Javascript
jQuery中:visible选择器用法实例
2014/12/30 Javascript
使用Chrome浏览器调试AngularJS应用的方法
2015/06/18 Javascript
js+ajax实现获取文件大小的方法
2015/12/08 Javascript
bootstrap模态框垂直居中效果
2016/12/03 Javascript
详解vue.js的devtools安装
2017/05/26 Javascript
React事件处理的机制及原理
2018/12/03 Javascript
基于vue-cli3和element实现登陆页面
2019/11/13 Javascript
JS创建自定义对象的六种方法总结
2020/12/15 Javascript
python基础入门学习笔记(Python环境搭建)
2016/01/13 Python
python模块之re正则表达式详解
2017/02/03 Python
python实现下载文件的三种方法
2017/02/09 Python
Python中扩展包的安装方法详解
2017/06/14 Python
Python自动化运维_文件内容差异对比分析
2017/12/13 Python
如何在VSCode上轻松舒适的配置Python的方法步骤
2019/10/28 Python
python实现信号时域统计特征提取代码
2020/02/26 Python
matplotlib grid()设置网格线外观的实现
2021/02/22 Python
用canvas显示验证码的实现
2020/04/10 HTML / CSS
美国新蛋IT数码商城:Newegg.com
2016/07/21 全球购物
面料业务员岗位职责
2013/12/26 职场文书
本科毕业生自荐信
2014/06/02 职场文书
2014年个人债务授权委托书范本
2014/09/22 职场文书
大专护理专业自荐信
2015/03/25 职场文书
2015年事业单位办公室文员工作总结
2015/04/24 职场文书
初中班主任教育随笔
2015/08/15 职场文书
JavaScript流程控制(循环)
2021/12/06 Javascript
Spring依赖注入多种类型数据的示例代码
2022/03/31 Java/Android
mysql sql常用语句大全
2022/06/21 MySQL