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 05 Javascript
jquery attr 设定src中含有&(宏)符号问题的解决方法
Jul 26 Javascript
js控制滚动条缓慢滚动到顶部实现代码
Mar 20 Javascript
jQuery实现单击和鼠标感应事件
Feb 01 Javascript
jQuery实现批量判断表单中文本框非空的方法(2种方法)
Dec 09 Javascript
原生js仿jquery一些常用方法(必看篇)
Sep 20 Javascript
angular基于路由控制ui-router实现系统权限控制
Sep 27 Javascript
Javascript 数组去重的方法(四种)详解及实例代码
Nov 24 Javascript
详解vue-cil和webpack中本地静态图片的路径问题解决方案
Sep 27 Javascript
vuex + axios 做登录验证 并且保存登录状态的实例
Sep 16 Javascript
Vue组件实现触底判断
Jun 26 Javascript
修改layui的后台模板的左侧导航栏可以伸缩的方法
Sep 10 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
将兴奋、喜悦和坎加斯带到戴安娜:亚马逊公主
2020/03/03 欧美动漫
PHP中获取变量的变量名的一段代码的bug分析
2011/07/07 PHP
php中将时间差转换为字符串提示的实现代码
2011/08/08 PHP
WIN8.1下搭建PHP5.6环境
2015/04/29 PHP
PHP反射机制原理与用法详解
2017/02/15 PHP
thinkPHP5.0框架简单配置作用域的方法
2017/03/17 PHP
使用vs code编辑调试php配置的方法
2019/01/29 PHP
PHP实现文件上传后台处理脚本
2020/03/04 PHP
JS和JQUERY获取页面大小,滚动条位置,元素位置(示例代码)
2013/12/14 Javascript
JQuery中阻止事件冒泡几种方式及其区别介绍
2014/01/15 Javascript
使用vue.js2.0 + ElementUI开发后台管理系统详细教程(一)
2017/01/21 Javascript
以BootStrap Tab为例写一个前端组件
2017/07/25 Javascript
react-native 完整实现登录功能的示例代码
2017/09/11 Javascript
Angular4自制一个市县二级联动组件示例
2017/11/21 Javascript
使用node打造自己的命令行工具方法教程
2018/03/26 Javascript
使用JavaScript实现node.js中的path.join方法
2018/08/12 Javascript
如何用RxJS实现Redux Form
2018/12/29 Javascript
Vue动态组件与异步组件实例详解
2019/02/23 Javascript
ajax跨域访问遇到的问题及解决方案
2019/05/23 Javascript
ES6 Proxy实现Vue的变化检测问题
2019/06/11 Javascript
[53:52]OG vs EG 2018国际邀请赛淘汰赛BO3 第二场 8.23
2018/08/24 DOTA
python基于multiprocessing的多进程创建方法
2015/06/04 Python
Python实现曲线拟合操作示例【基于numpy,scipy,matplotlib库】
2018/07/12 Python
python内置数据类型之列表操作
2018/11/12 Python
Python的高阶函数用法实例分析
2019/04/11 Python
python GUI库图形界面开发之PyQt5窗口背景与不规则窗口实例
2020/02/25 Python
python3 sleep 延时秒 毫秒实例
2020/05/04 Python
俄罗斯隐形眼镜和眼镜在线商店:Cronos
2020/06/02 全球购物
供货协议书
2014/04/22 职场文书
小学生推普周国旗下讲话稿
2014/09/21 职场文书
镇党委书记群众路线整改措施思想汇报
2014/10/13 职场文书
2015年幼儿园大班工作总结
2015/04/25 职场文书
运动会表扬稿范文
2015/05/05 职场文书
战友聚会致辞
2015/07/28 职场文书
golang 定时任务方面time.Sleep和time.Tick的优劣对比分析
2021/05/05 Golang
python神经网络编程之手写数字识别
2021/05/08 Python