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语言本身谈项目实战
Dec 27 Javascript
jQuery 加上最后自己的验证
Nov 04 Javascript
10个基于jQuery或JavaScript的WYSIWYG 编辑器整理
May 06 Javascript
javascript 函数调用的对象和方法
Jul 01 Javascript
JS实现日期加减的方法
Nov 29 Javascript
javascript修改表格背景色实例代码分享
Dec 10 Javascript
javascript下使用Promise封装FileReader
Feb 19 Javascript
js传递数组参数到后台controller的方法
Mar 29 Javascript
JavaScript设计模式之代理模式实例分析
Jan 16 Javascript
使用layer模态框给新页面传值的方法
Sep 27 Javascript
VUEX-action可以修改state吗
Nov 19 Javascript
Nuxt的路由配置和参数传递方式
Nov 06 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
用Flash图形化数据(一)
2006/10/09 PHP
PHP 获取文件权限函数介绍
2013/07/11 PHP
PHP动态输出JavaScript代码实例
2015/02/12 PHP
PHP格式化MYSQL返回float类型的方法
2016/03/30 PHP
Yii实现的多级联动下拉菜单
2016/07/13 PHP
适合PHP初学者阅读的4本经典书籍
2016/09/23 PHP
php设计模式之工厂模式用法经典实例分析
2019/09/20 PHP
laravel按天、按小时,查询数据的实例
2019/10/09 PHP
Laravel 前端资源配置教程
2019/10/18 PHP
php实现快速对二维数组某一列进行组装的方法小结
2019/12/04 PHP
JavaScript 验证浏览器是否支持javascript的方法小结
2009/05/17 Javascript
需要做特殊处理的DOM元素属性的访问
2010/11/05 Javascript
表单JS弹出填写提示效果代码
2011/04/16 Javascript
JS+CSS 制作的超级简单的下拉菜单附图
2013/11/22 Javascript
刷新页面的几种方法小结(JS,ASP.NET)
2014/01/07 Javascript
PHP+jQuery实现随意拖动层并即时保存拖动位置
2015/04/30 Javascript
jquery代码实现多选、不同分享功能
2015/07/31 Javascript
七夕情人节丘比特射箭小游戏
2015/08/20 Javascript
JavaScript仿微博发布信息案例
2016/11/16 Javascript
ES6模块化的import和export用法方法总结
2017/08/08 Javascript
Vue.extend 编程式插入组件的实现
2019/11/18 Javascript
[05:02][DOTA2]DOTA进化论 第一期
2013/09/27 DOTA
[50:38]DOTA2-DPC中国联赛 正赛 Phoenix vs CDEC BO3 第二场 3月7日
2021/03/11 DOTA
关于Django外键赋值问题详解
2017/08/13 Python
python使用turtle库绘制时钟
2020/03/25 Python
Python实现的旋转数组功能算法示例
2019/02/23 Python
Python使用到第三方库PyMuPDF图片与pdf相互转换
2019/05/03 Python
总结Python图形用户界面和游戏开发知识点
2019/05/22 Python
利用rest framework搭建Django API过程解析
2019/08/31 Python
Python Pandas对缺失值的处理方法
2019/09/27 Python
python实现人性化显示金额数字实例详解
2020/09/25 Python
浅析Python中字符串的intern机制
2020/10/03 Python
社会治安综合治理管理责任书
2014/04/16 职场文书
五年级小学生评语
2014/12/26 职场文书
教你使用pyinstaller打包Python教程
2021/05/27 Python
python实现层次聚类的方法
2021/11/01 Python