vue 中监测滚动条加载数据(懒加载数据)
1:钩子函数监听滚动事件:
mounted () {this.$nextTick(function () {window.addEventListener('scroll', this.onScroll)})},
2:
methods: {// 获取滚动条当前的位置 getScrollTop () {var scrollTop = 0if (document.documentElement && document.documentElement.scrollTop) {scrollTop = document.documentElement.scrollTop} else if (document.body) {scrollTop = document.body.scrollTop}return scrollTop},// 获取当前可视范围的高度 getClientHeight () {var clientHeight = 0if (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('触发!!!')}}},}