data() {
return {
loading: false,
loadingMore: false,//loading 加载更多
isScroll: true,//是否可以滚动
pageIndex: 1,
pageSize: 10,
list: [],
}
},
mounted() {
document.addEventListener('scroll', this.scrollMoreData, false)
},
methods: {
scrollMoreData() {
const scrollTopHeight = document.documentElement.scrollTop || document.body.scrollTop //滚动高度
const clientHeight = document.documentElement.clientHeight || window.screen.availHeight //屏幕可用工作区高度
const offsetHeight = document.documentElement.offsetHeight || document.body.offsetHeight //网页可见区域高(包括边线的宽)
// console.log(scrollTopHeight, clientHeight, scrollTopHeight + clientHeight + 50, offsetHeight)
if ((scrollTopHeight + clientHeight) + 50 >= offsetHeight && this.isScroll) {
this.isScroll = false
this.loadingMore = true
let pageNo = this.pageIndex += 1
api.Get('/list', {
pageIndex: pageNo,
pageSize: this.pageSize,
}).then(res => {
this.loadingMore = false
if (res.data.list.length > 0) {
this.isScroll = true
this.list = [...this.list, ...res.data.list]
} else {
this.show = true
}
})
}
},
},
},
destroyed() {
document.removeEventListener('scroll', this.scrollMoreData, false)
}