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 相关文章推荐
理解JavaScript中的事件
Sep 23 Javascript
JavaScript 类的定义和引用 JavaScript高级培训 自定义对象
Apr 27 Javascript
javascript正则表达式使用replace()替换手机号的方法
Jan 19 Javascript
jQuery使用fadeout实现元素渐隐效果的方法
Mar 27 Javascript
jQuery幻灯片带缩略图轮播效果代码分享
Aug 17 Javascript
JavaScript数值千分位格式化的两种简单实现方法
Aug 01 Javascript
vue.js实现简单轮播图效果
Oct 10 Javascript
基于百度地图api清除指定覆盖物(Overlay)的方法
Jan 26 Javascript
django使用channels2.x实现实时通讯
Nov 28 Javascript
JS动态显示倒计时效果
Dec 12 Javascript
vue使用微信扫一扫功能的实现代码
Apr 11 Javascript
vue css 相对路径导入问题级踩坑记录
Jun 05 Vue.js
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
优化使用mysql存储session的php代码
2008/01/10 PHP
PHP实现定时生成HTML网站首页实例代码
2008/11/20 PHP
对于PHP 5.4 你必须要知道的
2013/08/07 PHP
php导出csv数据在浏览器中输出提供下载或保存到文件的示例
2014/04/24 PHP
ThinkPHP使用心得分享-上传类UploadFile的使用
2014/05/15 PHP
PHP实现的简单sha1加密功能示例
2017/08/27 PHP
PHP设计模式之装饰器模式定义与用法详解
2018/04/02 PHP
解决laravel groupBy 对查询结果进行分组出现的问题
2019/10/09 PHP
asp批量修改记录的代码
2008/06/25 Javascript
原生javascript实现隔行换色
2015/01/04 Javascript
javascript动态添加删除tabs标签的方法
2015/07/06 Javascript
JS获取checkbox的个数简单实例
2016/08/19 Javascript
Angular在一个页面中使用两个ng-app的方法
2017/02/20 Javascript
深入理解React Native原生模块与JS模块通信的几种方式
2017/07/24 Javascript
JS一个简单的注册页面实例
2017/09/05 Javascript
深入理解vuex2.0 之 modules
2017/11/20 Javascript
vue中倒计时组件的实例代码
2018/07/06 Javascript
chosen实现省市区三级联动
2018/08/16 Javascript
vue 百度地图(vue-baidu-map)绘制方向箭头折线实例代码详解
2020/04/28 Javascript
使用js原生实现年份轮播选择效果实例
2021/01/12 Javascript
[52:44]VGJ.T vs infamous Supermajor小组赛D组败者组第一轮 BO3 第一场 6.3
2018/06/04 DOTA
Python通过解析网页实现看报程序的方法
2014/08/04 Python
Python中下划线的使用方法
2015/03/27 Python
Python批量查询域名是否被注册过
2017/06/21 Python
Python列表list解析操作示例【整数操作、字符操作、矩阵操作】
2017/07/25 Python
Python实现模拟登录网易邮箱的方法示例
2018/07/05 Python
Python 在OpenCV里实现仿射变换—坐标变换效果
2019/08/30 Python
基于Numba提高python运行效率过程解析
2020/03/02 Python
Pytorch实现将模型的所有参数的梯度清0
2020/06/24 Python
CSS3中Animation属性的使用详解
2015/08/06 HTML / CSS
加拿大百叶窗和窗帘定制网站:Blinds
2017/01/30 全球购物
美国山地自行车、露营、户外装备和服装购物网站:Aventuron
2018/05/05 全球购物
Electric官网:美国高级眼镜和配件品牌
2020/06/04 全球购物
新西兰最大的天然保健及护肤品网站:HealthPost(直邮中国)
2021/02/13 全球购物
初入社会应届生求职信
2013/11/18 职场文书
承办会议欢迎词
2014/01/17 职场文书