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 keycode总结
Feb 04 Javascript
IE8下关于querySelectorAll()的问题
May 13 Javascript
基于jquery实现漂亮的动态信息提示效果
Aug 02 Javascript
EasyUI 中 MenuButton 的使用方法
Jul 14 Javascript
JS之Date对象和获取系统当前时间详解
Jan 13 Javascript
JavaScript中reduce()方法的使用详解
Jun 09 Javascript
通过js获取上传的图片信息(临时保存路径,名称,大小)然后通过ajax传递给后端的方法
Oct 01 Javascript
深入探究node之Transform
Jul 20 Javascript
使用 Node.js 开发资讯爬虫流程
Jan 07 Javascript
vue中如何动态绑定图片,vue中通过data返回图片路径的方法
Feb 07 Javascript
Vue 框架之动态绑定 css 样式实例分析
Nov 14 Javascript
Vue.extend实现挂载到实例上的方法
May 01 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压缩多个CSS为一个css的代码并缓存
2011/04/21 PHP
PHP5中实现多态的两种方法实例分享
2014/04/21 PHP
php实现兼容2038年后Unix时间戳转换函数
2015/03/18 PHP
PHP微信红包生成代码分享
2016/10/06 PHP
js tab 选项卡
2009/04/26 Javascript
js返回上一页并刷新的多种实现方法
2014/02/26 Javascript
JavaScript 里的类数组对象
2015/04/08 Javascript
javaScript中slice函数用法实例分析
2015/06/08 Javascript
js实现对ajax请求面向对象的封装
2016/01/08 Javascript
ui组件之input多选下拉实现方法(带有搜索功能)
2016/07/14 Javascript
js实现百度地图定位于地址逆解析,显示自己当前的地理位置
2016/12/08 Javascript
关于vue-resource报错450的解决方案
2017/07/24 Javascript
详解React开发必不可少的eslint配置
2018/02/05 Javascript
JS实现图片旋转动画效果封装与使用示例
2018/07/09 Javascript
layui结合form,table的全选、反选v1.0示例讲解
2018/08/15 Javascript
javascript实现摄像头拍照预览
2019/09/30 Javascript
[01:08]2014DOTA2展望TI 剑指西雅图LGD战队专访
2014/06/30 DOTA
python之import机制详解
2014/07/03 Python
Python中的列表生成式与生成器学习教程
2016/03/13 Python
python虚拟环境virualenv的安装与使用
2016/12/18 Python
深入解答关于Python的11道基本面试题
2017/04/01 Python
Python常见字符串操作函数小结【split()、join()、strip()】
2018/02/02 Python
windows下安装Python的XlsxWriter模块方法
2018/05/03 Python
Python装饰器简单用法实例小结
2018/12/03 Python
使用python的pexpect模块,实现远程免密登录的示例
2019/02/14 Python
Python字符串格式化f-string多种功能实现
2020/05/07 Python
django 连接数据库出现1045错误的解决方式
2020/05/14 Python
python判断变量是否为列表的方法
2020/09/17 Python
美国购买韩国护肤和美容产品网站:Althea Korea
2020/11/16 全球购物
个性大学生自我评价
2013/12/04 职场文书
机械设计职业生涯规划书
2013/12/27 职场文书
汽车专业大学生职业生涯规划范文
2014/01/07 职场文书
师生聚会感言
2014/01/26 职场文书
普通大学毕业生自荐信范文
2014/02/23 职场文书
手术室护士节演讲稿
2014/08/27 职场文书
CSS实现隐藏搜索框功能(动画正反向序列)
2021/07/21 HTML / CSS