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 相关文章推荐
jQuery 版元素拖拽原型代码
Apr 25 Javascript
jQuery中position()方法用法实例
Jan 16 Javascript
jquery validate和jquery form 插件组合实现验证表单后AJAX提交
Aug 26 Javascript
jQuery实现的简单分页示例
Jun 01 Javascript
Angularjs实现带查找筛选功能的select下拉框示例代码
Oct 04 Javascript
详解layui中的树形关于取值传值问题
Jan 16 Javascript
Vue仿支付宝支付功能
May 25 Javascript
浅谈ng-zorro使用心得
Dec 03 Javascript
JSX在render函数中的应用详解
Sep 04 Javascript
vue中使用极验验证码的方法(附demo)
Dec 04 Javascript
浅谈vue权限管理实现及流程
Apr 23 Javascript
简单了解JavaScript作用域
Jul 31 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 制作简单的留言本
2009/11/02 PHP
PHP中的string类型使用说明
2010/07/27 PHP
PHP 第二节 数据类型之数组
2012/04/28 PHP
PHP语法小结之基础和变量
2015/11/22 PHP
PHP关键特性之命名空间实例详解
2017/05/06 PHP
事件模型在各浏览器中存在差异
2010/10/20 Javascript
一个JavaScript变量声明的知识点
2013/10/28 Javascript
JavaScript中检测变量是否存在遇到的一些问题
2013/11/11 Javascript
使用jquery prev()方法找到同级的前一个元素
2014/07/11 Javascript
整理Javascript数组学习笔记
2015/11/29 Javascript
基于BootStarp的Dailog
2016/04/28 Javascript
jQuery实现点击DIV同时点击CheckBox,并为DIV上背景色的实例
2017/12/18 jQuery
vue2.0学习之axios的封装与vuex介绍
2018/05/28 Javascript
vue3.0 CLI - 2.5 - 了解组件的三维
2018/09/14 Javascript
layui form.render('select', 'test2') 更新渲染的方法
2019/09/27 Javascript
JQuery中的常用事件、对象属性与使用方法分析
2019/12/23 jQuery
JavaScrip如果基于url实现图片下载
2020/07/03 Javascript
antd vue 刷新保留当前页面路由,保留选中菜单,保留menu选中操作
2020/08/06 Javascript
ES6 十大特性简介
2020/12/09 Javascript
python生成器的使用方法
2013/11/21 Python
Python中在脚本中引用其他文件函数的实现方法
2016/06/23 Python
python随机在一张图像上截取任意大小图片的方法
2019/01/24 Python
利用python list完成最简单的DB连接池方法
2019/08/09 Python
numpy创建单位矩阵和对角矩阵的实例
2019/11/29 Python
解决python中显示图片的plt.imshow plt.show()内存泄漏问题
2020/04/24 Python
如何在Canvas上的图形/图像绑定事件监听的实现
2020/09/16 HTML / CSS
英国著名音像制品和图书游戏购物网站:Zavvi
2016/08/04 全球购物
马克华菲官方商城:Mark Fairwhale
2016/09/04 全球购物
写clone()方法时,通常都有一行代码,是什么?
2012/10/31 面试题
META-INF文件夹中的MANIFEST.MF的作用
2016/06/21 面试题
计算机学生的自我评价分享
2014/02/18 职场文书
2015年事业单位办公室文员工作总结
2015/04/24 职场文书
2015年节能减排工作总结
2015/05/14 职场文书
新闻稿格式范文
2015/07/18 职场文书
2016年教师节感恩寄语
2015/12/04 职场文书
《最后一头战象》教学反思
2016/02/16 职场文书