美文网首页
在vue中判断滚动开始和结束

在vue中判断滚动开始和结束

作者: 此行欲上天 | 来源:发表于2018-11-04 15:27 被阅读0次

    最近接到了一个需求,需要在页面中判断滚动开始和结束。使用纯原生的方法我们可以判断出滚动开始和结束,但是还是有些繁琐的。利用vue中的watch实现了这一功能,今天就以垂直滚动为例,分享一下实现方法。代码如下:

     export default {
            data() {
                return {
                    oldScrollTop: 0, //记录上一次滚动结束后的滚动距离
                    scrollTop: 0 // 记录当前的滚动距离
                }
            },
            watch: {
                scrollTop(newValue, oldValue) {
                    setTimeout(() => {
                        if(newValue == window.scrollY) { //延时执行后当newValue等于window.scrollY,代表滚动结束
                            console.log('滚动结束');
                            this.oldScrollTop = newValue; //每次滚动结束后都要给oldScrollTop赋值
                        };
                    }, 20); //必须使用延时器,否则每次newValue和window.scrollY都相等,无法判断,20ms刚好大于watch的侦听周期,故延时20ms
                    if(this.oldScrollTop == oldValue) { //每次滚动开始时oldScrollTop与oldValue相等
                        console.log('滚动开始');
                    }
                }
            },
            methods: {
                handleScroll() {
                    window.addEventListener('scroll', () => {
                        this.scrollTop = window.scrollY;
                    })
                }
            },
            mounted() {
                this.handleScroll();
            },
            beforeDestroy() {
                window.removeEventListener('scroll'); //离开当前组件别忘记移除事件监听哦
            }
        }
    

    感谢阅读该文章,看完点个赞哦!

    相关文章

      网友评论

          本文标题:在vue中判断滚动开始和结束

          本文链接:https://www.haomeiwen.com/subject/yzgrxqtx.html