今天在画页面的时候,碰到了个变态需求, 就是pc端实现table列表上拉 加载 ,不要分页;按理说pc端加载下一页直接用分页器就行了 ; 但是碰见这种需求 , 我一个臭开发也没办法,只能尽量去实现,话不都多说直接上代码
需求:滚动条触底加载下一页的数据
/*
multipleTable table列表的ref值
*/
this.$refs.multipleTable.bodyWrapper.addEventListener(
'scroll',
(res) => {
const height = res.target
const clientHeight = height.clientHeight
const scrollTop = height.scrollTop
const scrollHeight = height.scrollHeight
if (clientHeight + scrollTop === scrollHeight && scrollTop > 0) {
if (this.listQuery.pageNum * this.listQuery.pageSize >= this.total) {
this.$message.info('没有更多数据了')
return
}
this.listQuery.pageNum++
this.listLoading = true
// 接口
yhqyQuery(this.listQuery).then((response) => {
if (response.status === 200) {
// 合并数据
this.tableData = this.tableData.concat(response.data.records)
}
this.listLoading = false
})
}
},
true
)