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 相关文章推荐
(currentStyle)javascript为何有时用style得不到已设定的CSS的属性
Aug 15 Javascript
JavaScript 常用函数库详解
Oct 21 Javascript
jquery实现简单的拖拽效果实例兼容所有主流浏览器(优化篇)
Jun 28 Javascript
解析jQuery的三种bind/One/Live事件绑定使用方法
Dec 30 Javascript
原生Javascript和jQuery做轮播图简单例子
Oct 11 Javascript
JS+HTML5实现的前端购物车功能插件实例【附demo源码下载】
Oct 17 Javascript
对称加密与非对称加密优缺点详解
Feb 06 Javascript
jQuery事件与动画基础详解
Feb 23 Javascript
vue 系列——vue2-webpack2框架搭建踩坑之路
Dec 22 Javascript
Vue2.0子同级组件之间数据交互方法
Feb 28 Javascript
如何解决日期函数new Date()浏览器兼容性问题
Sep 11 Javascript
JS常用跨域方法实现原理解析
Dec 09 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)四
2006/10/09 PHP
php discuz 主题表和回帖表的设计
2009/03/13 PHP
用来解析.htpasswd文件的PHP类
2012/09/05 PHP
PHP创建PowerPoint2007文档的方法
2015/12/10 PHP
laravel创建类似ThinPHP中functions.php的全局函数
2016/11/26 PHP
无语,javascript居然支持中文(unicode)编程!
2007/04/12 Javascript
javascript 模拟点击广告
2010/01/02 Javascript
JSON为什么那样红为什么要用json(另有洞天)
2012/12/26 Javascript
将HTML的左右尖括号等转义成实体形式的两种实现方式
2014/05/04 Javascript
JS实现三级折叠菜单特效,其它级可自动收缩
2015/08/06 Javascript
详解Wondows下Node.js使用MongoDB的环境配置
2016/03/01 Javascript
理解javascript对象继承
2016/04/17 Javascript
JS百度地图搜索悬浮窗功能
2017/01/12 Javascript
js基于myFocus实现轮播图效果
2017/02/14 Javascript
JavaScript实现一个空中避难的小游戏
2017/06/06 Javascript
对Angular中单向数据流的深入理解
2018/03/31 Javascript
JS遍历JSON数组及获取JSON数组长度操作示例【测试可用】
2018/12/12 Javascript
JS闭包经典实例详解
2018/12/20 Javascript
Element Popover 弹出框的使用示例
2020/07/26 Javascript
Vue——解决报错 Computed property "****" was assigned to but it has no setter.
2020/12/19 Vue.js
如何使用七牛Python SDK写一个同步脚本及使用教程
2015/08/23 Python
使用Python编写简单的端口扫描器的实例分享
2015/12/18 Python
python分割一个文本为多个文本的方法
2019/07/22 Python
Atom Python 配置Python3 解释器的方法
2019/08/28 Python
Numpy之将矩阵拉成向量的实例
2019/11/30 Python
HTML5的语法变化介绍
2013/08/13 HTML / CSS
Lentiamo丹麦:购买便宜的隐形眼镜
2021/01/13 全球购物
RIP版本1跟版本2的区别
2013/12/30 面试题
2014年管理工作总结
2014/11/22 职场文书
2015感人爱情寄语
2015/02/26 职场文书
售后服务质量承诺书
2015/04/29 职场文书
总经理2015中秋节致辞
2015/07/29 职场文书
小学音乐课歌曲《堆雪人》教学反思
2016/02/18 职场文书
2019年行政人事个人工作总结范本!
2019/07/19 职场文书
python必学知识之文件操作(建议收藏)
2021/05/30 Python
Go语言读取txt文档的操作方法
2022/01/22 Golang