<van-pull-refresh v-model="listloading" @refresh="onRefresh">
<van-list
v-show="list.length > 0"
v-model="listloading"
:finished="finished"
finished-text="没有更多了"
@load="onLoad"//(该事件是vant:van-list自带)滚动条与底部距离小于 offset 时触发
>
......
</van-list>
</van-pull-refresh>
<script>
export default {
data() {
return {
filter: {
page: 1,
size: 10,
},
list: [],
listloading: false,//是否处于加载状态
finished: false,//是否已加载完成
aptotalNum: 0,//总条数
};
},
onLoad() {
this.filter.page += 1;
this.getList();//该方法为获取列表数据
},
onRefresh() {
setTimeout(() => {
Toast("刷新成功");
this.filter.page = 1;
this.finished = false;
this.listloading = true;
this.list = [];
this.getList();
}, 1000);
},
getList() {
this.$api.sysformprocess
.getProcessList(this.filter)
.then((res) => {
if (res.resp_code == 0) {
this.list = this.list.concat(res.datas.records);
this.aptotalNum = res.datas.total;
//数据全部加载完成
if (this.list.length >= this.aptotalNum) {
this.finished = true;
} else {
this.finished = false;
}
this.listloading = false;
}
})
.catch((err) => {
Toast.fail("查询失败,错误信息:" + err);
});
},
}
</script>