vue移动端页面下拉加载更多,原生方式,不依靠插件
methods(){
// 滚动到页面底部时,请求内容
async scrollBottom () {
let scrollTop = document.documentElement.scrollTop || document.body.scrollTop //页面滚动的高度
let clientHeight = document.documentElement.clientHeight //可视区域高度
let scrollHeight = document.documentElement.scrollHeight //可滚动内容的高度
let bottomOfWindow = scrollTop + clientHeight >= scrollHeight //是否滚动到底部
this.bottomOfWindow = bottomOfWindow
//loading 和 this.tableData.length和this.total是自己的判断条件
if (scrollTop !== 0 && bottomOfWindow && !this.loading && this.tableData.length < this.total) {
this.pageSize += 18
await this.getList() //getList()获取后台数据
}
}
}
mounted () {
window.addEventListener('scroll', this.scrollBottom)
},
destroyed () {
window.removeEventListener('scroll', this.scrollBottom)
}