HTML和滚动事件(核心为红色部分)
data数据
data() {
return {
current: 1,//当前页数
applyData: [],//数据存放
pages: 0,//一共多少页数
LOCK_STATUS: false, //当在请求数据时,滚动时锁定不能再发送分页请求
datas: []//临时存储数据
}
},
加载数据请求:默认第一个,一页家在10条
async getApplyData(type) {
this.LOCK_STATUS = true
let result = await warehouseManagement.queryInboundApplyPageByWoreHouse({
current: this.current,
size: 10
})
this.applyData = result.records
this.pages = result.pages
if (this.applyData.length >= 0) {
this.LOCK_STATUS = false
result.records.forEach(e => {
this.datas.push(e)
})
this.applyData = this.datas
} else {
this.applyData = []
}
},
当鼠标滚动当时候当前页数++,判断是否超出长度
$list.scrollTop 鼠标滚动距离顶部的距离
$list.offsetHeight ul元素高度
$list.scrollHeight ul总高度
async handleScroll() {
if (this.LOCK_STATUS) return false
if (this.current >= this.pages) return false
const $list = this.$refs.list
// $list.scrollTop 鼠标滚动距离顶部的距离
// $list.offsetHeight ul元素高度
// $list.scrollHeight ul总高度
// $list.scrollTop + $list.offsetHeight = $list.scrollHeight
if ($list.scrollTop + $list.offsetHeight >= $list.scrollHeight) {
this.current++
this.getApplyData('in')
}
},