标签:mount his 获取 class UNC listen top 分页 height
vue 中监测滚动条加载数据(懒加载数据)
1:钩子函数监听滚动事件:
mounted () { this.$nextTick(function () { window.addEventListener(‘scroll‘, this.onScroll) }) },
2:
methods: { // 获取滚动条当前的位置 getScrollTop () { var scrollTop = 0 if (document.documentElement && document.documentElement.scrollTop) { scrollTop = document.documentElement.scrollTop } else if (document.body) { scrollTop = document.body.scrollTop } return scrollTop }, // 获取当前可视范围的高度 getClientHeight () { var clientHeight = 0 if (document.body.clientHeight && document.documentElement.clientHeight) { clientHeight = Math.min(document.body.clientHeight, document.documentElement.clientHeight) } else { clientHeight = Math.max(document.body.clientHeight, document.documentElement.clientHeight) } return clientHeight }, // 获取文档完整的高度 getScrollHeight () { return Math.max(document.body.scrollHeight, document.documentElement.scrollHeight) }, // 滚动事件触发下拉加载 onScroll () { if (this.getScrollHeight() - this.getClientHeight() - this.getScrollTop() <= 0) { if (this.status === 1) { this.status = 0 // 页码,分页用,默认第一页 this.deliverParams.page += 1 // 调用请求函数 alert(‘触发!!!‘) } } }, }
标签:mount his 获取 class UNC listen top 分页 height
原文地址:https://www.cnblogs.com/dw3306/p/10298279.html