Web前端小站Web

vue mixin 屏幕滚动到底部监听

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

3255 热度
1085 浏览

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

vue mixin 屏幕滚动到底部监听

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

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

评论 (0)

0/50
暂无评论,快来抢沙发吧~