资讯专栏INFORMATION COLUMN

vue监听scroll的坑

Taste / 3130人阅读

摘要:最近开始用写个小项目,踩了不少坑,这里记录下爬坑过程,给有同样经历的人帮助。解决办法我回去看了下文档的生命周期,看到了,然后直接在这个周期内销毁就可以了。

最近开始用vue写个小项目,踩了不少坑,这里记录下爬坑过程,给有同样经历的人帮助。

问题

今天想在vue的项目里面用下拉加载,然后就直接写了:

但是我发现我切换路由以后依旧其他页面也触发了scrollHandler函数,然后我想到使用了vue-router做的spa项目,window对象不变的,所以需要在每次使用后销毁。

解决办法

我回去看了下vue文档的生命周期,看到了destroyed,然后直接在这个周期内销毁就可以了。

使用throttle出现的新问题

下拉加载一般需要配合throttle限流函数(原理可以看这里)来避免频繁触发,所以优化代码成这样:

然后发现没法用removeEventListener了,因为这个函数第二个参数不接受匿名函数。

最后代码

用一个变量中转下

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/88399.html

相关文章

  • vue better-scroll 遇到的坑

    摘要:先看效果介绍一个简单的静态页面主要是使用做横向滚动,点击标签滚动到相应位置,以及滚到相应位置后对应标签显示红色。 先看效果 showImg(https://segmentfault.com/img/bVbqAdC?w=374&h=626); 介绍 一个简单的静态页面主要是使用 better-scroll 做横向滚动,点击标签滚动到相应位置,以及滚到相应位置后对应标签显示红色。开发过程中...

    yiliang 评论0 收藏0
  • vux-ui的ViewBox的坑

    摘要:链接该组件为高布局,可以解决部分键盘输入的问题,但是同时会在中出现向下滚动时无法自动隐藏工具栏和底部栏的问题。在里元素定位为,效果等同于。 链接 https://doc.vux.li/zh-CN/comp... 该组件为100%高布局,可以解决部分键盘输入的问题,但是同时会在safari中出现向下滚动时无法自动隐藏url工具栏和底部栏的问题。 在viewBox里元素定位为absolut...

    用户83 评论0 收藏0
  • vux-ui的ViewBox的坑

    摘要:链接该组件为高布局,可以解决部分键盘输入的问题,但是同时会在中出现向下滚动时无法自动隐藏工具栏和底部栏的问题。在里元素定位为,效果等同于。 链接 https://doc.vux.li/zh-CN/comp... 该组件为100%高布局,可以解决部分键盘输入的问题,但是同时会在safari中出现向下滚动时无法自动隐藏url工具栏和底部栏的问题。 在viewBox里元素定位为absolut...

    luodongseu 评论0 收藏0
  • vux-ui的ViewBox的坑

    摘要:链接该组件为高布局,可以解决部分键盘输入的问题,但是同时会在中出现向下滚动时无法自动隐藏工具栏和底部栏的问题。在里元素定位为,效果等同于。 链接 https://doc.vux.li/zh-CN/comp... 该组件为100%高布局,可以解决部分键盘输入的问题,但是同时会在safari中出现向下滚动时无法自动隐藏url工具栏和底部栏的问题。 在viewBox里元素定位为absolut...

    voyagelab 评论0 收藏0
  • 基于better-scrollvue滚动组件

    摘要:让用户可以滚动页面。事件中拿到想要的后浏览器已经隐藏地址栏和工具栏,放开插件滚动。发现派发的方法在父组件中监听后获取位置参数的效果不太好必须要手指贴着滑动才可以这个设置为可以实时派发滚动事件和位置参数其他坑点待发现欢迎大佬一起交流 写在前面 由于最近一个移动端项目中许多地方有滚动需求, 横向,纵向的都有,所以就基于better-scroll封装了一个通用的滚动组件,期间也踩了一些坑,有...

    xiaotianyi 评论0 收藏0

发表评论

0条评论

Taste

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<