vant list 分页问题是项目中基本都会遇到的,但是还是记录一下吧,万一哪天脑袋短路不会写了怎么办(略略略~~)
// list 是vant按需引入的组件
// demand-accept-list 是自定义列表组件(分页写到组件外面)
// null-data 自定义空数据页面(有需要的自己画界面吧)
<list
v-model="loading"
:finished="finished"
:finished-text="showEmpty ? '' : '没有更多了'"
:immediate-check="false"
@load="onLoad"
>
<demand-accept-list :list="acceptList" :tab-index="tabIndex" />
</list>
<null-data v-if="showEmpty" msg="暂无信息" />
selectDemandMyList() {
this.showEmpty = false;
// apiVolunteerWebDemandList 这个是我的请求接口(按照自己的接口写吧)
apiVolunteerWebDemandList(this.dataForm).then(data => {
console.log(data, '数acceptList据');
this.loading = false;
let length = 0;
if (data.content) {
length = data.content.length;
} else {
this.finished = true;
this.showEmpty = true;
}
if (length) {
this.acceptList = this.acceptList.concat(data.content);
if (length < this.dataForm.pageSize) {
this.finished = true;
} else {
this.dataForm.pageNow++;
}
} else {
this.finished = true;
if (this.dataForm.pageNow === 1) {
this.showEmpty = true;
}
}
});
},