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 Onunload与Onbeforeunload使用小结
Dec 31 Javascript
jQuery 选择器理解
Mar 16 Javascript
JavaScript 类型的包装对象(Typed Wrappers)
Oct 27 Javascript
JavaScript网页定位详解
Jan 13 Javascript
javascript模拟post提交隐藏地址栏的参数
Sep 03 Javascript
针对初学者的jQuery入门指南
Aug 15 Javascript
浅析ES6的八进制与二进制整数字面量
Aug 30 Javascript
Javascript 链式作用域详细介绍
Feb 23 Javascript
JavaScript中数组Array.sort()排序方法详解
Mar 01 Javascript
JS设置随机出现2个数字的实例代码
Jul 19 Javascript
Js判断H5上下滑动方向及滑动到顶部和底部判断的示例代码
Nov 15 Javascript
在webstorm开发微信小程序之使用阿里自定义字体图标的方法
Nov 15 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
php中mysql连接方式PDO使用详解
2015/02/25 PHP
PHP下载远程文件到本地存储的方法
2015/03/24 PHP
php在数据库抽象层简单使用PDO的方法
2015/11/03 PHP
PHP的PDO操作简单示例
2016/03/30 PHP
解决php 处理 form 表单提交多个 name 属性值相同的 input 标签问题
2017/05/11 PHP
PHP设计模式(五)适配器模式Adapter实例详解【结构型】
2020/05/02 PHP
javascript 学习之旅 (3)
2009/02/05 Javascript
jquery 事件执行检测代码
2009/12/09 Javascript
基于jquery的15款幻灯片插件
2011/04/10 Javascript
浅谈angularJS 作用域
2015/07/05 Javascript
kindeditor编辑器点中图片滚动条往上顶的bug
2015/07/05 Javascript
javascript实现的登陆遮罩效果汇总
2015/11/09 Javascript
JS获取当前脚本文件的绝对路径
2016/03/02 Javascript
基于javascript实现页面加载loading效果
2020/09/15 Javascript
Javascript6中字符串的四个新用法分享
2016/09/11 Javascript
微信小程序 图片边框解决方法
2017/01/16 Javascript
JS优化与惰性载入函数实例分析
2017/04/06 Javascript
详解vue更改头像功能实现
2019/04/28 Javascript
jQuery--遍历操作实例小结【后代、同胞及过滤】
2020/05/22 jQuery
[01:59]DOTA2首部纪录片《Free to play》预告片
2014/03/12 DOTA
基于Python实现对PDF文件的OCR识别
2016/08/05 Python
Python利用IPython提高开发效率
2016/08/10 Python
Python使用matplotlib绘图无法显示中文问题的解决方法
2018/03/14 Python
python 获取当天每个准点时间戳的实例
2018/05/22 Python
利用python如何在前程无忧高效投递简历
2019/05/07 Python
德国家具折扣店:POCO
2020/02/28 全球购物
安全目标责任书
2014/07/22 职场文书
战略合作意向书
2014/07/29 职场文书
幼儿园校园小喇叭广播稿
2014/10/17 职场文书
2015社区健康教育工作总结
2015/05/20 职场文书
大学同学聚会感言
2015/07/30 职场文书
坚持不是死撑,更重要的是心态
2019/08/19 职场文书
解决mysql的int型主键自增问题
2021/07/15 MySQL
聊聊基于pytorch实现Resnet对本地数据集的训练问题
2022/03/25 Python
我们认为中短波广播场强仪的最佳组合
2022/04/05 无线电
MySQL 原理与优化之Limit 查询优化
2022/08/14 MySQL