需求 数据太多需要做分页,不用表格的形式,使用滚动加载方式
<template>
<ul class="list" @scroll="load" v-show="status">
<li
v-for="(item, index) in list"
:key="index"
class="infinite-list-item"
@click="abb(item)"
>
{{ item.id }}
</li>
</ul>
</template>
data() {
return {
list: [{ id: 1 }, { id: 2 }, { id: 3 }, { id: 4 }, { id: 5 }],
}
},
load(e) {
let conScrollHeight = e.target.scrollHeight // 可以滚动区域的高度
let conClientHeight = e.target.clientHeight // 区域内容的高度
let conScrollTop = e.target.scrollTop // 内容滚动了的高度
// 内容滚动了的高度 + 区域内容的高度 >= 可以滚动区域的高度
// 则证明滑动到了页面底部,这个时候就去处理加载更多的逻辑)
if (conScrollTop + conClientHeight >= conScrollHeight) {
this.list.push({ id: this.list.length + 1 })
console.log('加载中------------')
}
},