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 相关文章推荐
自适应高度框架 ----属个人收藏内容
Jan 22 Javascript
JS等比例缩小图片尺寸的实例
Feb 27 Javascript
验证手机号码的JS方法分享
Sep 10 Javascript
jquery form 隐藏的input 选择
Apr 29 Javascript
使用javascript实现Iframe自适应高度
Dec 24 Javascript
javascript实现禁止鼠标滚轮事件
Jul 24 Javascript
8 行 Node.js 代码实现代理服务器
Dec 05 Javascript
jQuery设置图片等比例缩小的方法
Apr 29 jQuery
react中使用swiper的具体方法
May 15 Javascript
详解webpack运行Babel教程
Jun 13 Javascript
Vue组件内部实现一个双向数据绑定的实例代码
Apr 04 Javascript
vue+vant 上传图片需要注意的地方
Jan 03 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
Cannot modify header information错误解决方法
2008/10/08 PHP
微信营销平台系统?刮刮乐的开发
2014/06/10 PHP
关于Aptana Studio生成自动备份文件的解决办法
2009/12/23 Javascript
几个比较经典常用的jQuery小技巧
2010/03/01 Javascript
日历查询的算法 如何计算某一天是星期几
2012/12/12 Javascript
Jquery 类网页微信二维码图块滚动效果具体实现
2013/10/14 Javascript
Javascript单元测试框架QUnitjs详细介绍
2014/05/08 Javascript
JS实现类似51job上的地区选择效果示例
2016/11/17 Javascript
Bootstrap CSS组件之导航条(navbar)
2016/12/17 Javascript
JavaScript 基础表单验证示例(纯Js实现)
2017/07/20 Javascript
js实现图片放大展示效果
2017/08/30 Javascript
使用vue的v-for生成table并给table加上序号的实例代码
2017/10/27 Javascript
vue绑定的点击事件阻止冒泡的实例
2018/02/08 Javascript
vue-router权限控制(简单方式)
2018/10/29 Javascript
react实现antd线上主题动态切换功能
2019/08/12 Javascript
VUE注册全局组件和局部组件过程解析
2019/10/10 Javascript
详解为什么Vue中的v-if和v-for不建议一起用
2021/01/13 Vue.js
[49:42]DOTA2上海特级锦标赛主赛事日 - 3 胜者组第二轮#2Secret VS EG第一局
2016/03/04 DOTA
python数据结构之图深度优先和广度优先实例详解
2015/07/08 Python
python中函数默认值使用注意点详解
2016/06/01 Python
Python中扩展包的安装方法详解
2017/06/14 Python
python把数组中的数字每行打印3个并保存在文档中的方法
2018/07/17 Python
Python多线程实现支付模拟请求过程解析
2020/04/21 Python
Pytorch 卷积中的 Input Shape用法
2020/06/29 Python
解决Ubuntu18中的pycharm不能调用tensorflow-gpu的问题
2020/09/17 Python
Selenium执行完毕未关闭chromedriver/geckodriver进程的解决办法(java版+python版)
2020/12/07 Python
python des,aes,rsa加解密的实现
2021/01/16 Python
纯CSS3实现3D旋转书本效果
2016/03/21 HTML / CSS
HTML5 Canvas锯齿图代码实例
2014/04/10 HTML / CSS
美国男女折扣服饰百货连锁店:Stein Mart
2017/05/02 全球购物
Lacoste(法国鳄鱼)加拿大官网:以标志性的POLO衫而闻名
2019/05/15 全球购物
英国在线照明超市:Castlegate Lights
2019/10/30 全球购物
统计学专业毕业生的自我评价分享
2013/11/28 职场文书
交通事故和解协议书
2015/01/27 职场文书
公司行政主管岗位职责
2015/04/09 职场文书
同意离婚答辩状
2015/05/22 职场文书