1、首先
mounted() {
window.onscroll = this.scrollFn
}
2、window.onscroll滚动就会触发,所以如果可视区域的高度screenHeight + 元素向上卷曲出去的距离scrollTop > 列表的高度就pageIndex + 1 请求数据
2.1
mounted() {
// 头部有数据
let headerHeight = this.$refs.header.clientHeight;
// 获取可视区域的高度
let screenHeight = document.documentElement.clientHeight || document.body.clientHeight;
// 可视区域的高度要去除头部导航栏和头部的高度
this.listViewHeight = screenHeight - headerHeight - parseInt(this.theme.navHeaderHeight);
window.onscroll = this.scrollFn
}
2.2
scrollFn() {
let scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
if (scrollTop + this.listViewHeight >= this.listHeight) {
this.pageConfig.pageIndex += 1;
this.getOpportunity();
}
}
3、这样有个问题随着滑动scrollTop + this.listViewHeight >= this.listHeight会一直为true 所以要限制条件 !this.over
scrollFn() {
let scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
if (scrollTop + this.listViewHeight >= this.listHeight && !this.over) {
this.pageConfig.pageIndex += 1;
this.getOpportunity();
}
}
4、over是什么?当请求数据的长度小于每页的页数的时候说明数据已经请求完了,所以要终止 over = true
// pageConfig: { // 分页设置
// DefaultSize: 50,
// PageSize: 15,
// PageIndex: 1,
// PageCount: 0
// },
async getVisitData() {
let res = await syncLogSer.getSyncDataLog(this.pageConfig)
let { Data: data, Total: total, Count: count } = res;
if (data.length < this.pageConfig.PageSize) {
this.over = true;
}
this.dataList = this.pageConfig.pageIndex === 1 ? data : [...this.dataList, ...data]
this.$nextTick(() => {
this.listHeight = this.$refs.dataListH.scrollHeight;
});
},