<van-list
v-model:loading="loading"
:finished="finished"
finished-text="没有更多了"
@load="onLoad"
>
内容-----
</van-list>
const page = ref({
pageNum: 0,
pageSize: 2,
});
const loading = ref(false);
const finished = ref(false);
//第一步
const onLoad = () => {
page.value.pageNum += 1;
getList();
};
//最后
//统一获取分页
const getList = async () => {
let date = customDateRange.value ?? dataObj.value;
let pam = {
...date,
...page.value,
deptCode: user.deptCode,
state: value1.value,
};
const res = await fnName(pam);
let rows = res.records;
let total = res.total; //数据总条数
if (rows == null || rows.length === 0) {
loading.value = false; // 关闭加载状态
finished.value = true; // 加载结束
return;
}
loading.value = false; // 关闭加载状态
list.value = list.value.concat(rows); //合并数组
// 如果合并之后的数组长度大于返回的数据总条数
if (list.value.length >= total) {
finished.value = true; // 加载结束
}
};
vue3 使用vant框架的van-list 上拉加载用法
最新推荐文章于 2024-07-25 08:40:26 发布