首先在钩子函数mounted里面做异步函数调用
mounted: function() {
this.$nextTick(function() {
window.addEventListener(“scroll”, this.onScroll,false);
});
},
第二部要销毁监控事件
destroyed:function(){
window.removeEventListener(‘scroll’,this.onScroll,false); //对监控滚动条事件进行解绑
},
// 获取滚动条当前的位置
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.footer == false) {
this.indexCount += 1;
this.$nextTick(function() {
this.getData({ pageIndex: this.indexCount, pageSize: “10” });
});
}
}
},