官方文档
虽然无限滚动组件是 element plus 的组件, 而 element plus 适用于 Vue3, 但亲测同样适用于 Vue2.
// 1. 列表的外层容器添加无限滚动相关属性 <div class="workbench-agenda-content" v-infinite-scroll="onLazyLoad" infinite-scroll-disabled="disabled" infinite-scroll-immediate="false" > <span id="empty-tip" style="margin-top: 10px">暂无数据</span> <agenda-list-item v-for="item of agendaList" :key="item.id" :type="agendaType" :item="item" /> // 2. 添加 loading 和 no more 场景提示 <p v-if="listParams.loading">Loading...</p> <p v-if="listParams.finished">No More</p> </div> // 3. 列表和列表参数 data() { return { agendaList: [], listParams: { pageNo: 1, pageSize: 4, loading: false, error: false, finished: false, }, } } // 4. 列表请求方法 queryList() { const params = { pageSize: this.listParams.pageSize, pageNo: this.listParams.pageNo, } api.xxx.then((res) => { // 空数据处理 if (!res || !res.length) { this.listParams.loading = false this.listParams.finished = true return } // 拼接数据 this.agendaList = this.agendaList.concat(res) // 关闭 loading this.listParams.loading = false // 若返回条目小于设定的每页条目, 则显示 no more if (res.length < this.listParams.pageSize) { this.listParams.finished = true } }) // 5. 懒加载(在滚动到容器最底部时触发) onLazyLoad() { this.listParams.loading = true if (this.listParams.finished == false) { // 加载未结束, 则增加分页参数 this.listParams.pageNo++ // 请求列表数据 this.queryApplyListForWorkbench(this.agendaType) } }, },
复制
注:
pageSize 设置要超过当前页面显示数据量, 滚动功能才不会出bug
若结合tab页使用, 注意要在切换回调事件里清空数据并重置参数, 再请求数据
// 待办已办页签切换回调 handleAgendaClick(index) { this.agendaType = index // 重置列表数据 this.agendaList = [] this.listParams = { pageNo: 1, pageSize: 4, loading: false, error: false, finished: false, } this.queryApplyListForWorkbench(this.agendaType) },
复制