vue 调用addEventListener，监听scroll

最新推荐文章于 2024-02-21 15:32:06 发布
最新推荐文章于 2024-02-21 15:32:06 发布
阅读量3.7k 收藏 1
点赞数
分类专栏： vue.js js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/logo_cvv/article/details/89192931
版权
js 同时被 2 个专栏收录
3 篇文章 0 订阅
订阅专栏
vue.js
2 篇文章 0 订阅
订阅专栏

这个是用vue组件页面时，内容过多出现滚动条，下拉到底部，可以点击-返回顶部                                                                         

此处用到addEventListener监听scroll，网上很多搜到方法都是 window.addEventListener('scroll', this.handleScroll()),但是不起作用，此处正确的写法应该是

window.addEventListener('scroll', this.handleScroll, true),

addEventListener的第二个参数是function，而不是this.handleScroll()去执行它，如下：红色标的是错误写法，还有用完要记得销毁监听

logo_cvv
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue监听scroll的坑的解决方法
01-19
最近开始用vue写个小项目，踩了不少坑，这里记录下爬坑过程，给有同样经历的人帮助。 问题 今天想在vue的项目里面用下拉加载，然后就直接写了: 但是我发现我切换路由以后依旧其他页面也触发了scrollHandler函数，然后我想到使用了vue-router做的spa项目，window对象不变的，所以需要在每次使用后销毁。 解决办法 我回去看了下vue文档的生命周期，看到了destroyed，然后直接在这个周期内销毁就可以了。 使用throttle出现的新问题 下拉加载一般需要配合throttle限流函数(原理可以看这里)来避免频繁触发，所以优化代码成这样： 然后发现没法用removeEv
addeventlistener监听scroll跟touch(实例讲解)
12-04
这三个事件只在手机上生效 touchstart：手指开始触屏 touchmove：手指移动 touchend：手指触屏结束 这个事件在手机上跟在pc端都生效 scroll事件 addeventlistener(name,callback,optional,useCapture) useCapture：事件是否用捕获事件，从外到里，true                         默认为false:使用冒泡事件，从里到外 optional:{      passive:false时，阻止默认事件，ture时不阻止默认事件(默认值是false) } passive:true可以防止
VUE中窗口监听与销毁
最新发布
m0_64407944的博客
02-21 353
【代码】VUE中窗口监听与销毁。
vue使用@scroll监听滚动事件时，@scroll无效问题的解决方法详解
12-13
本文实例讲述了vue使用@scroll监听滚动事件时，@scroll无效问题的解决方法。分享给大家供大家参考，具体如下： 在网上看了一下vue中监听滚动条滚动事件，清一色的使用document.addEventListener('scroll',function(){}) 我是在做滚动条滑到底部时，自动加载更多的时候有这个需求。 我认为使用document.addEventListener会破坏vue的统一性，对我这种有轻微代码强迫症的人来说，让我感觉很不爽。而且这种做法，会让你更加难以判断是否滑动到底部了，特别是当你并不是整页滚动，而是页面中拥有一个fixed固定的头部时。 在.vue的组件
vue 实现滚动监听加载更多 addEventListener(‘scroll‘, this.handleScroll)
谨言不言☞博客
12-09 5848
vue 实现滚动监听加载更多 addEventListener(‘scroll’, this.handleScroll) 直接上代码： mounted() { // 监听滚动事件，然后用handleScroll这个方法进行相应的处理 window.addEventListener('scroll', this.handleScroll) }, // 离开这个页面销毁滚动条事件，不然会给每一个页面都触发 beforeDestroy() { window.removeEve
Vue 中快速实现div滚动监控
CloudJay的博客
07-31 5967
草稿
vue中使用scroll事件
weixin_43886630的博客
10-20 1760
1.在mounted生命周内 // 在页面挂载阶段，监听页面的滚动行为 window.addEventListener("scroll", this.handleScroll, true); 2 handleScroll(e) { // 变量scrollTop 为当前页面的滚动条纵坐标位置 let scrollTop = document.documentElement.scrollTop || document.body.scrollTop; // 变量windowHeight 是可视区的高..
Vue监听页面区域scroll滚动条方法，实现区域内某元素吸顶效果
XINGZI前端程序猿的博客
10-11 4675
Vue监听区域滚动条事件，实现简易元素吸顶效果
VUE绑定滚动条
小破船借箭的博客
07-21 1104
绑定在window上 mounted() { window.addEventListener('scroll',this.handleScroll,true) }, // 需要在页面销毁时，移除监听事件，避免了内存泄漏 beforeDestroy() { window.removeEventListener("scroll",this.handleScroll); }, methods: { // 滚动事件的回调 handleScroll(e
vue实现平滑返回顶部，实时显示和隐藏返回顶部按钮，
mochenxue的博客
07-02 656
这里我们主要使用了window.addEventListener("scroll", this.handleScroll, true);这个监听事件，监听页面滑动的距离，当页面的滑动到一定的距离的时候就显示返回顶部的按钮，并且实现平滑返回。
react.js 监听滚动事件：window.addEventListener的scroll问题
吴冬雪的博客
05-11 3694
// 组件加载时 componentDidMount () { window.addEventListener('scroll', this.handleScroll, true) } // 组件卸载时 componentWillUnmount () { window.removeEventListener('scroll', this.handleScroll, true) } // 监听滚动 handleScroll = () => { console.log('进来').
使用vue.js在页面内组件监听scroll事件的方法
10-18
今天小编就为大家分享一篇使用vue.js在页面内组件监听scroll事件的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
vue监听滚动事件实现滚动监听
11-26
在vue中实现滚动监听和原生js无太大差异，下面是一个简单的demo，可在控制台查看结果 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title&...
【VUE】在vue中使用@scroll监听滚动事件，@scroll无效问题解决！
热门推荐
李小白的博客
06-22 3万+
在网上看了一下vue中监听滚动条滚动事件，清一色的使用document.addEventListener('scroll',function(){})我是在做滚动条滑到底部时，自动加载更多的时候有这个需求。我认为使用document.addEventListener会破坏vue的统一性，对我这种有轻微代码强迫症的人来说，让我感觉很不爽。而且这种做法，会让你更加难以判断是否滑动到底部了，特别是当你并...
VUE中鼠标滚轮使div左右滚动
weixin_47113728的博客
12-12 2454
VUE中鼠标滚轮使div左右滚动 文章目录VUE中鼠标滚轮使div左右滚动前言一、单个实现1.定义变量2.编写方法3.触发4.卸载二、多个实现1.描述2.addEventListener（参数）2.触发3.卸载 前言 技术点： addEventListener/attachEvent 功能描述： 鼠标停在div中，若div有x轴滚动条，则鼠标滚轮控制x轴滚动条横向滚动 一、单个实现 1.定义变量 data () { return { domObj: null } } 2.编写方法 绑定事件 s
vue+elementUi获取滚动条位置、判断是否存在滚动条、addEventListener、removeEventListener、document、window、scroll、client
“代码农”微信公众号
05-06 6118
vue+elementUi获取滚动条位置、判断是否存在滚动条、addEventListener、removeEventListener、document、window、scroll、client
在vue项目页面监听div滚动，和设置滚动值
qq_36990322的博客
11-07 1万+
在vue项目页面监听div滚动 第一步 mounted(){ // 先给页面注册滚动事件 document.addEventListener('scroll',this.Scroll) } 第二步 methods: { // 滚动事件 // 如果不绑定到元素上，则只能监听页面滚动 Scroll(e...
vue中监听div的滑动到底部 ，并实现懒加载
yuyehui5073的博客
08-26 1554
<div ref="rightDiv">11233</div> mounted(){ this.$refs.rightDiv.addEventListener('scroll',this.scroll) // debounce 是一个防抖工具类函数 需要自己定义 } scroll() { const scrollTop = this.$refs.rightDiv.scrollTop // 获取可视区的高度 const windowHei.
addEventListener监听
weixin_61978391的博客
04-06 1125
2.监听浏览器窗口（resize）1.监听滚动条（scroll）
vue-seamless-scroll 监听滚动事件
09-13
要在 `vue-seamless-scroll` 组件中监听滚动事件，可以使用 `@scroll` 指令来实现。在组件上添加 `@scroll` 指令，并将其绑定到一个方法上，该方法将会在滚动事件触发时被调用。 以下是一个示例代码： ```vue ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值