<van-pull-refresh v-model="refreshing" @refresh="onRefresh" >
<van-list
ref="chekd"
v-model="loading"
:finished="finished"
finished-text="没有更多了"
@load="onLoad"
:error.sync="error"
error-text="请求失败,点击重新加载"
>
<div class="van-clearfic">
<div class="content">
<!--列表组件 -->
<cardList
:cardList="cardListshop"
@clickBtn="clickBtns"
:toStart="toStart"
:execution="execution"
:executions="executions"
:completes="completes"
:over="over"
/>
</div>
</div>
</van-list>
</van-pull-refresh>
data(){
return{
loading: false, //true为加载状态
finished: false, //没有更多
error: false, //提示错误信息
refreshing: false, // 下拉
pageNumber: 1,
pageSize: 10,
cardListshop: [], // 列表卡片
}
methods:{
//下拉的话refreshing为true
onRefresh() {
this.finished = false;
// 将 loading 设置为 true,表示处于加载状态
this.loading = true;
this.onLoad();
},
onLoad() {
if (this.refreshing) {
this.cardListshop = []; //清空数据
this.refreshing = false; //停止下拉
this.pageNumber = 1; 初始化页码
}
this.loading = true; //加载数据
this.QueryOver(); // 请求后端数据铺设界面
},
// 1.0查询
async QueryOver() {
this.toast(); //vant的加载提示
const param = {
pageNumber: this.pageNumber,
pageSize: this.pageSize,
};
await api.Inventoryresult(param).then(res => {
if (res.code === 0) {
this.loading = false;// 加载关闭
const cardListshops = res.data; //赋值
this.pageNumber += 1;
Toast.clear();//清除加载提示
const total = res.data.total; //获取请求数据的总条数
const end = this.cardListshop.length; //已获取的数据的总条数
if (end >= total) { //如果两个相等就停止加载,显示没有更多
this.finished = true;
return;
}
} else {
Toast(res.message);
}
}).catch(error => { //抛出错误
this.error = true; //显示点击加载更多
this.refreshing = false;
this.loading = false;
console.log(error);
});
},
}
记录一下,vant组件的使用过程,有不足的地方欢迎补充