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 相关文章推荐
Prototype使用指南之enumerable.js
Jan 10 Javascript
善用事件代理,警惕闭包的性能陷阱。
Jan 20 Javascript
Javascript 颜色渐变效果的实现代码
Oct 01 Javascript
html的DOM中document对象anchors集合用法实例
Jan 21 Javascript
扒一扒JavaScript 预解释
Jan 28 Javascript
Bootstrap免费字体和图标网站(值得收藏)
Mar 16 Javascript
微信小程序出现wx.navigateTo页面不跳转问题的解决方法
Dec 26 Javascript
JS实现快递单打印功能【推荐】
Jun 21 Javascript
VUE接入腾讯验证码功能(滑块验证)备忘
May 07 Javascript
VUE:vuex 用户登录信息的数据写入与获取方式
Nov 11 Javascript
在pycharm中开发vue的方法步骤
Mar 04 Javascript
JS实现点击掉落特效
Jan 29 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
PHP4 与 MySQL 数据库操作函数详解
2006/12/06 PHP
Yii2中Restful API原理实例分析
2016/07/25 PHP
PHP架构及原理知识点详解
2019/12/22 PHP
jQuery实现的原图对比窗帘效果
2014/06/15 Javascript
jQuery表单域选择器用法分析
2015/02/10 Javascript
简介JavaScript中的setDate()方法的使用
2015/06/11 Javascript
JS实现仿苹果底部任务栏菜单效果代码
2015/08/28 Javascript
javascript简单判断输入内容是否合法的方法
2016/05/11 Javascript
Javascript函数中的arguments.callee用法实例分析
2016/09/16 Javascript
微信小程序 WXML、WXSS 和JS介绍及详解
2016/10/08 Javascript
Vue.js之slot深度复制详解
2017/03/10 Javascript
AngularJS读取JSON及XML文件的方法示例
2017/05/25 Javascript
JS生成随机打乱数组的方法示例
2017/12/23 Javascript
浅谈Node 调试工具入门教程
2018/03/20 Javascript
详解使用mpvue开发github小程序总结
2018/07/25 Javascript
如何去除富文本中的html标签及vue、react、微信小程序中的过滤器
2018/11/21 Javascript
使用JavaScrip模拟实现仿京东搜索框功能
2019/10/16 Javascript
vue.js实现简单的计算器功能
2020/02/22 Javascript
基于JavaScript获取url参数2种方法
2020/04/17 Javascript
TypeScript 运行时类型检查补充工具
2020/09/28 Javascript
[16:19]教你分分钟做大人——风暴之灵
2015/03/11 DOTA
Python3控制路由器——使用requests重启极路由.py
2016/05/11 Python
开源Web应用框架Django图文教程
2017/03/09 Python
python 把列表转化为字符串的方法
2018/10/23 Python
对pandas的行列名更改与数据选择详解
2018/11/12 Python
python模糊图片过滤的方法
2018/12/14 Python
在Pycharm中将pyinstaller加入External Tools的方法
2019/01/16 Python
Python中的字符串切片(截取字符串)的详解
2019/05/15 Python
用python wxpy管理微信公众号并利用微信获取自己的开源数据
2019/07/30 Python
Gucci法国官方网站:意大利奢侈品牌
2018/07/25 全球购物
电子商务求职信
2014/06/15 职场文书
运动会400米加油稿(8篇)
2014/09/22 职场文书
储备店长岗位职责
2015/04/14 职场文书
调解协议书范本
2016/03/21 职场文书
python学习之panda数据分析核心支持库
2021/05/07 Python
Win11远程连接不上怎么办?Win11远程桌面用不了的解决方法
2022/08/05 数码科技