vue中给window添加滚动监听无效的解决方案 | 您所在的位置:网站首页 › vue的监听为什么失效 › vue中给window添加滚动监听无效的解决方案 |
页面中有这么一个需求,当页面滚动到一定高度之后,页面中的某些元素进行吸顶,固定到顶部位置,或者是滚动到一定程度进行更新数据的操作。 我相信不少网友查阅过类似的资料,网友给出的解决方案,很多都是在mounted中添加 window.addEventListener("scroll", this.handleScroll);采用这种形式来实现页面监听滚动的效果。 笔者最初也是采用了这种方式,刚开始可以实现想要的效果,后来,莫名其妙的就不可用了,经过一番探讨,使用监听组件滚动的形式来解决这个问题,至于通过window来实现监听为什么突然就不可用了,笔者暂时还不清楚什么原因造成的,有知道原因的欢迎留言。 想要实现监听组件滚动的效果,首先需要给需要监听的组件添加ref,以便可以通过this.$refs的形式拿到该元素的dom节点。 以简单示例来说明,有一个a.vue的组件,我想监听这个组件的滚动,那么在该组件的容器元素上添加ref=”a”,然后通过下面的代码形式来操作: // 通过$refs获取dom元素 this.box = this.$refs.a // 监听这个dom的scroll事件 this.box.addEventListener('scroll', () => { this.handleScroll(); }, false)上述代码为处理组件滚动监听的主要代码内容。 handleScroll() { // 这是一个示例代码,打印出监听滚动的组件滚动距离 var scrollTop = this.$refs.a.scrollTop; console.log(scrollTop); }同样的道理,如果想对a.vue组件内部的某一块结点区域进行滚动监听,也是采用这种方式。 注意点: 如果采用了上述方案没有实现监听滚动的效果,请检查是否出现以下问题: 需要监听滚动的元素结点是否给了height和overflow:scroll 需要监听滚动的元素结点的父元素结点是否设置了高度 在vux中,如果你使用了view-box,你需要给view-box一个高度,因为view-box的父元素高度为100%,所以笔者采取的方案就是将view-box的高度也设置为100%。 经检测,此方案有效。 |
CopyRight 2018-2019 实验室设备网 版权所有 |