1. 程式人生 > 其它 >vant中list元件使用方法

vant中list元件使用方法

<van-pull-refresh
v-model="isRefreshLoading"
success-text="重新整理成功"
@refresh="onRefresh"
>
<van-list
v-if=List.length > 0"
v-model="isListLoading"
:finished="isListLoadFinished"
loading-text="載入中..."
finished-text="沒有更多了"
:immediate-check="false"
@load="onListLoad"
>
</van-list>
</van-pull-refresh>

return {
isRefreshLoading: false,
isListLoading: false,
isListLoadFinished: false,
}
getList() {
getListApi({
isShowLoading: this.pageNum === 1,
pageNum: this.pageNum,
pageSize: this.pageSize
}).then(res => {
this.list = this.list.concat(res.data);
this.isListLoadFinished = this.list.length === (res.data.total - 0);
this.pageNumr += 1;
this.isListLoading = false;
this.isShowList = this.list.length === 0;
}).catch(err => {
this.isListLoadFinished = true;
})
},
onRefresh() {
this.pageNum = 1;
this.isRefreshLoading = false;
this.list = [];
this.getList();
},
onListLoad() {
setTimeout(() => {
if (this.isListLoadFinished) {
return
}
this.getList();
}, 1000)
},