返回顶部
首页 > 资讯 > 前端开发 > html >vue中怎么监听scroll方法
  • 333
分享到

vue中怎么监听scroll方法

2024-04-02 19:04:59 333人浏览 独家记忆
摘要

本篇文章为大家展示了Vue中怎么监听scroll方法,内容简明扼要并且容易理解,绝对能使你眼前一亮,通过这篇文章的详细介绍希望你能有所收获。问题今天想在vue的项目里面用下拉加载,然后就直接写了:但是我发现

本篇文章为大家展示了Vue中怎么监听scroll方法,内容简明扼要并且容易理解,绝对能使你眼前一亮,通过这篇文章的详细介绍希望你能有所收获。

问题

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

vue中怎么监听scroll方法

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

解决办法

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

vue中怎么监听scroll方法

使用throttle出现的新问题

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

vue中怎么监听scroll方法

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

最后代码

用一个变量中转下

vue中怎么监听scroll方法

上述内容就是vue中怎么监听scroll方法,你们学到知识或技能了吗?如果还想学到更多技能或者丰富自己的知识储备,欢迎关注编程网html频道。

--结束END--

本文标题: vue中怎么监听scroll方法

本文链接: https://lsjlt.com/news/72221.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

猜你喜欢
  • vue中怎么监听scroll方法
    本篇文章为大家展示了vue中怎么监听scroll方法,内容简明扼要并且容易理解,绝对能使你眼前一亮,通过这篇文章的详细介绍希望你能有所收获。问题今天想在vue的项目里面用下拉加载,然后就直接写了:但是我发现...
    99+
    2024-04-02
  • vue中监听scroll事件失效的问题及解决
    目录vue监听scroll事件失效问题下面附实现成功的代码vue监听scroll事件vue监听scroll事件失效问题 vue项目中遇到需要监听页面某个元素距顶部距离实现吸顶效果,正...
    99+
    2024-04-02
  • vue中watch监听方法有哪些
    这篇文章主要为大家展示了“vue中watch监听方法有哪些”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“vue中watch监听方法有哪些”这篇文章吧。1.vue中的watch作用就如其命名就是监...
    99+
    2023-06-22
  • vue watch监听方法总结
    目录1.vue中的watch作用就如其命名就是监听的作用2.监听这个对象的属性3.监听这个对象的属性4.监听这个对象的属性在vue中,使用watch来响应数据的变化,关于watch的...
    99+
    2024-04-02
  • Vue监听的方法有哪些
    这篇“Vue监听的方法有哪些”文章的知识点大部分人都不太理解,所以小编给大家总结了以下内容,内容详细,步骤清晰,具有一定的借鉴价值,希望大家阅读完这篇文章能有所收获,下面我们一起来看看这篇“Vue监听的方法...
    99+
    2024-04-02
  • vue中怎么监听数组变化
    这篇文章主要介绍了vue中怎么监听数组变化,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。vue是什么Vue是一套用于构建用户界面的渐进式JavaScript框架,Vue与其它...
    99+
    2023-06-14
  • Vue之监听方法案例详解
    vue中的监听方法 watch 注意 名字 你想监听哪个属性,就要和他起一样的名字 1.作用 用来监听vue实例中的数据变化 可以随时修改状态的变化 2.触发条件 当你监听的属性...
    99+
    2024-04-02
  • vue中v-on可以监听多个方法吗
    在vue中v-on是提供的事件绑定机制,它是可以用来监听多个方法的,能够使用@替代v-on,比如:“”,而以下是v-on监听多个方法的示例。示例:...
    99+
    2024-04-02
  • Vue中怎么利用watch监听数组
    今天就跟大家聊聊有关Vue中怎么利用watch监听数组,可能很多人都不太了解,为了让大家更加了解,小编给大家总结了以下内容,希望大家根据这篇文章可以有所收获。1.普通的watchdata() { ...
    99+
    2024-04-02
  • Vue watch监听使用的几种方法
    目录一、watch使用的几种方法二、watch中的immediate与handler和deep属性一、watch使用的几种方法 1、 通过 watch 监听 msg 数据的变化。 w...
    99+
    2022-12-22
    Vue watch监听 Vue watch监听原理
  • vue中watch监听对象中某个属性的方法
    目录immediate 和 handlerdeep 深度监听以currentParams为例,监听selOrgId属性immediate 和 handler watch 的用法有个特...
    99+
    2023-05-17
    vue watch监听对象属性 vue watch监听
  • vue中watch的立即监听和深度监听是什么
    小编给大家分享一下vue中watch的立即监听和深度监听是什么,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!watch 的立即监...
    99+
    2024-04-02
  • vue 中怎么监听滚动条到底部
    今天就跟大家聊聊有关vue 中怎么监听滚动条到底部,可能很多人都不太了解,为了让大家更加了解,小编给大家总结了以下内容,希望大家根据这篇文章可以有所收获。1、怎样用纯js判断滚动条是否到底部?先了解几个关键...
    99+
    2024-04-02
  • vue中怎么同时监听多个参数
    这篇文章主要讲解了“vue中怎么同时监听多个参数”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“vue中怎么同时监听多个参数”吧!如何同时监听多个参数vue使用watch同时监听多个参数,其中...
    99+
    2023-06-29
  • vue中怎么实时监听本地存储
    这篇文章主要介绍“vue中怎么实时监听本地存储”,在日常操作中,相信很多人在vue中怎么实时监听本地存储问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”vue中怎么实时监听本地存储”的疑惑有所帮助!接下来,请跟...
    99+
    2023-06-30
  • Vue3.0中如何监听props方法
    目录Vue3.0如何监听props第一种第二种vue3.0监听props做数据回显Vue3.0如何监听props 学习vue3.0记录下props监听: 第一种 直接监听这个prop...
    99+
    2024-04-02
  • Oracle静态监听和动态监听的方法
    这篇文章主要介绍“Oracle静态监听和动态监听的方法”,在日常操作中,相信很多人在Oracle静态监听和动态监听的方法问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”Orac...
    99+
    2024-04-02
  • vue怎么使用watch监听属性
    这篇文章主要介绍了vue怎么使用watch监听属性的相关知识,内容详细易懂,操作简单快捷,具有一定借鉴价值,相信大家阅读完这篇vue怎么使用watch监听属性文章都会有所收获,下面我们一起来看看吧。基本用法Vue watch最重要的使用场景...
    99+
    2023-06-30
  • vue-better-scroll怎么用
    这篇文章将为大家详细讲解有关vue-better-scroll怎么用,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。首先安装better-scrollnpm i bette...
    99+
    2024-04-02
  • vue中怎么利用watch监听数据变化
    vue中怎么利用watch监听数据变化,相信很多没有经验的人对此束手无策,为此本文总结了问题出现的原因和解决方法,通过这篇文章希望你能解决这个问题。1、watch使用的几种方法(1)通过watch监听dat...
    99+
    2024-04-02
软考高级职称资格查询
推荐阅读
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作