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 相关文章推荐
用js实现多域名不同文件的调用方法
Jan 12 Javascript
JavaScript中合并数组的N种方法
Sep 16 Javascript
JavaScript实现列表分页功能特效
May 15 Javascript
JS实现图片垂直居中显示小结
Dec 13 Javascript
JS图片延迟加载插件LazyImgv1.0用法分析【附demo源码下载】
Sep 04 Javascript
async/await地狱该如何避免详解
May 10 Javascript
微信小程序通过保存图片分享到朋友圈功能
May 24 Javascript
详解如何快速配置webpack多入口脚手架
Dec 28 Javascript
JS数组求和的常用方法实例小结
Jan 07 Javascript
小程序和web画三角形实现解析
Sep 02 Javascript
JavaScript计算出两个数的差值
Mar 19 Javascript
vue 在服务器端直接修改请求的接口地址
Dec 19 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
php下实现在指定目录搜索指定类型文件的函数
2008/10/03 PHP
Codeigniter实现发送带附件的邮件
2015/03/19 PHP
php上传大文件设置方法
2016/04/14 PHP
Yii2中cookie用法示例分析
2016/07/18 PHP
golang与php实现计算两个经纬度之间距离的方法
2016/07/22 PHP
thinkphp 手机号和用户名同时登录
2017/01/20 PHP
safari下载文件自动加了html后缀问题
2018/11/09 PHP
PHP Include文件实例讲解
2019/02/15 PHP
动态加载js的几种方法
2006/10/23 Javascript
Js判断CSS文件加载完毕的具体实现
2014/01/17 Javascript
浅谈JavaScript function函数种类
2014/12/29 Javascript
纯js实现重发验证码按钮倒数功能
2015/04/21 Javascript
noty ? jQuery通知插件全面解析
2016/05/18 Javascript
微信小程序使用第三方库Underscore.js步骤详解
2016/09/27 Javascript
JavaScript基于扩展String实现替换字符串中index处字符的方法
2017/06/13 Javascript
详解VueRouter进阶之导航钩子和路由元信息
2017/09/13 Javascript
vue 动态改变静态图片以及请求网络图片的实现方法
2018/02/07 Javascript
vue2.0+koa2+mongodb实现注册登录
2018/04/10 Javascript
在Vue项目中使用d3.js的实例代码
2018/05/01 Javascript
bootstrap 弹出框modal添加垂直方向滚轴效果
2018/07/09 Javascript
基于JavaScript实现瀑布流布局
2018/08/15 Javascript
Webpack 4.x搭建react开发环境的方法步骤
2018/08/15 Javascript
vue自定义键盘信息、监听数据变化的方法示例【基于vm.$watch】
2019/03/16 Javascript
jquery将json转为数据字典的实例代码
2019/10/11 jQuery
Python批量查询域名是否被注册过
2017/06/21 Python
PyCharm在win10的64位系统安装实例
2017/11/26 Python
Python3解决棋盘覆盖问题的方法示例
2017/12/07 Python
python+pygame实现坦克大战小游戏的示例代码(可以自定义子弹速度)
2020/08/11 Python
static函数与普通函数有什么区别
2015/12/25 面试题
输入一行文字,找出其中大写字母、小写字母、空格、数字、及其他字符各有多少
2016/04/15 面试题
中间件分为哪几类
2012/03/14 面试题
销售简历自我评价怎么写
2014/09/26 职场文书
布达拉宫的导游词
2015/02/02 职场文书
2015大学生自我评价范文
2015/03/03 职场文书
《雀魂PONG☆》4月1日播出 PV角色设定情报
2022/03/20 日漫
Java Spring Lifecycle的使用
2022/05/06 Java/Android