我要评论
// 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)
}
},
},
若结合tab页使用, 注意要在切换回调事件里清空数据并重置参数, 再请求数据
// 待办已办页签切换回调
handleagendaclick(index) {
this.agendatype = index
// 重置列表数据
this.agendalist = []
this.listparams = {
pageno: 1,
pagesize: 4,
loading: false,
error: false,
finished: false,
}
this.queryapplylistforworkbench(this.agendatype)
},
发表评论