<van-empty image="search" description="无搜索内容" v-show="emptyShow" />
<van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="getList">
<div
class="list"
v-for="(item,index) in list"
:key="index"
:value="item"
@click="showComDetail(item)"
>
<div class="listName">{{item.name}}</div>
<div class="listUserName">{{item.userName}}</div>
<van-tag v-if="item.state == 1" color="#f2826a" class="listState">{{item.state | stateFilter}}</van-tag>
<van-tag
v-else-if="item.state == 2"
class="listState"
type="success"
>{{item.state | stateFilter}}</van-tag>
<van-tag class="listState" v-else type="primary">{{item.state | stateFilter}}</van-tag>
<div class="listTime">{{item.createTime}}</div>
<div class="line"></div>
</div>
</van-list>
data(){
return{
pageSize: 8, // 默认每次显示8条数据,还有的数据根据滚动加载
}}
// 获取所有数据
getList(current, size, params) {
getComList(
Object.assign(
{
current: this.currentPage,
size: this.pageSize
},
params
)
).then(res => {
this.list = res.data.data.records;
if (this.list.length == 0) {//搜索时判断是否有数据,显示空状态样式
this.emptyShow = true;
} else {
this.emptyShow = false;
}
this.total = res.data.data.total;
this.loading = false;
if(this.total > this.pageSize){//数据的总数大于显示页码数,页码数++,继续加载数据
this.pageSize ++;
}
if (this.list.length == res.data.data.total) {//直到数据长度等于获取的数据总数,停止加载
this.finished = true;//停止加载
}
});
},
另一种加载方法
if(response.data.data.total <= this.pageSize){
this.list = response.data.data.records
}else{
let arr = response.data.data.records;
this.list = this.list.concat(arr);
this.currentPage++;
}
// 加载状态结束
this.loading = false;
// 数据全部加载完成
if (this.list.length >= response.data.data.total) {
this.finished = true;
}