<van-pull-refresh v-model="refreshing" @refresh="onRefresh">
<van-empty description="暂无数据" v-show="emptyShow"/>
<van-list
v-model="loading"
:finished="finished"
finished-text=""
@load="onLoad"
>
<div class="item"
v-for="(item,index) in list"
:key="index"
@click="toDetail(item)"
>{{item.name}}</div>
</van-list>
</van-pull-refresh>
data() {
return {
// 分页参数
SearchParams: {
size: 10,
page: 1,
total: 0
},
// list列表
loading: false,
finished: false,
refreshing: false,
list: [],
//空状态
emptyShow: false,
}
},
onLoad() {
if (this.refreshing) {
this.list = [];
this.refreshing = false;
}
const params = new FormData()
params.append('currentPage', this.SearchParams.page)
params.append('pageSize', this.SearchParams.size)
listQuery(params).then(res => {
this.SearchParams.page++
this.list = this.list.concat(res.data.data)
if (this.list.length == 0) {//判断是否有数据，显示空状态样式
this.emptyShow = true;
} else {
this.emptyShow = false;
}
this.SearchParams.total = res.data.count
this.loading = false;
if (this.list.length >= this.SearchParams.total) {
this.finished = true;//停止加载
}
})
},
onRefresh() {
// 清空列表数据
this.finished = false;
this.SearchParams.page = 1
// 重新加载数据
// 将 loading 设置为 true，表示处于加载状态
this.loading = true;
this.onLoad();
},
