vue mixin 屏幕滚动到底部监听


现在越来越多的PC端也开始做上拉到底部加载更多了....那么我们这里通过mixin进行封装实现一下

要先在页面有个滚动到底部的执行方法(我这里起名叫onPageScroll)

内部可以做一些处理,我这里是加了一个滚动到底部的条件
export const scrollEvent = {
    methods: {
        onScroll(){
            // 变量scrollTop是滚动条滚动时,距离顶部的距离
            var scrollTop =
                document.documentElement.scrollTop ||
                document.body.scrollTop;
            // 变量windowHeight是可视区的高度
            var windowHeight =
                document.documentElement.clientHeight ||
                document.body.clientHeight;
            // 变量scrollHeight是滚动条的总高度
            var scrollHeight =
                document.documentElement.scrollHeight ||
                document.body.scrollHeight;
            // 滚动条到底部的条件
            if (scrollTop + windowHeight == scrollHeight) {
                // 滚动到底部     调用页面方法
                this.onPageScroll && this.onPageScroll();
            }
        }
    },
    mounted() {
        window.addEventListener('scroll', this.onScroll)
    },
    destroyed() {
        window.removeEventListener('scroll', this.onScroll, false);
    },
}

354

声明:Web前端小站 - 前端博客 - 王搏的个人博客|版权所有,违者必究|如未注明,均为原创

转载:转载请注明原文链接 - vue mixin 屏幕滚动到底部监听

评论
孙瑞杰生日