一个tab栏,三个tab , 需求 : 切换tab时对应的列表数据变化 (发请求时携带参数不同)
发现切换tab时没有触发onload上拉加载事件,没有请求下一页数据 。 解决 : 切换tab时,需重新设置loading 和finished
// 切换tab栏
clickTab() {
console.log(this.active);
this.list = [];
this.pageNo = 0;
this.loading = true;
this.finished = false;
this.onLoad();
},
完整代码
<van-tabs v-model="active" @change="clickTab">
<van-tab title="全部">
<van-list
v-model="loading"
:finished="finished"
finished-text="没有更多了"
@load="onLoad"
>
<van-cell
v-for="(item, index) in list"
:key="index"
is-link
>
<template #title> {{ item.customerName }} </template>
</van-cell>
</van-list>
</van-tab>
<van-tab title="未拜访">
<van-list
v-model="loading"
:finished="finished"
finished-text="没有更多了"
@load="onLoad"
>
<van-cell
v-for="(item, index) in list"
:key="index"
is-link
>
<template #title> {{ item.customerName }} </template>
</van-cell>
</van-list>
</van-tab>
<van-tab title="已拜访">
<van-list
v-model="loading"
:finished="finished"
finished-text="没有更多了"
@load="onLoad"
>
<van-cell
v-for="(item, index) in list"
:key="index"
is-link
>
<template #title> {{ item.customerName }} </template>
</van-cell>
</van-list>
</van-tab>
</van-tabs>
mounted(){
this.loadClientList();
}
data() {
return {
//数据列表
list: [],
// 加载状态
loading: true,
// 是否加载结束
finished: false,
// 页码值
pageNo: 1,
pageSize: 10,
// 数据总条数
total: "",
active: 0,
};
},
methods:{
// 获取拜访客户列表
async loadClientList() {
if (this.active == 0) {
try {
const { data: res } = await getClientList({
pageNo: this.pageNo,
pageSize: this.pageSize
});
console.log(res);
let rows = res.data.list;
// 如果返回的数组是空或数组长度是0
if (rows == null || rows.length === 0) {
this.loading = false; // 关闭加载状态
this.finished = true; // 加载结束
return;
}
this.loading = false; // 关闭加载状态
this.total = res.data.count;
this.list = this.list.concat(rows);
console.log(this.list);
// 如果合并之后的数组长度大于返回的数据总条数
if (this.list.length >= this.total) {
this.finished = true; // 加载结束
}
} catch (err) {
console.log("请求报错 :", err);
}
} else if (this.active == 1) {
try {
const { data: res } = await getClientList({
pageNo: this.pageNo,
pageSize: this.pageSize,
visitStatus: "01",
});
console.log(res);
let rows = res.data.list;
// 如果返回的数组是空或数组长度是0
if (rows == null || rows.length === 0) {
this.loading = false; // 关闭加载状态
this.finished = true; // 加载结束
return;
}
this.loading = false; // 关闭加载状态
this.total = res.data.count;
this.list = this.list.concat(rows);
console.log(this.list);
// 如果合并之后的数组长度大于返回的数据总条数
if (this.list.length >= this.total) {
this.finished = true; // 加载结束
}
} catch (err) {
console.log("请求报错 :", err);
}
} else if (this.active == 2) {
try {
const { data: res } = await getClientList({
pageNo: this.pageNo,
pageSize: this.pageSize,
visitStatus: "09",
});
console.log(res);
let rows = res.data.list;
// 如果返回的数组是空或数组长度是0
if (rows == null || rows.length === 0) {
this.loading = false; // 关闭加载状态
this.finished = true; // 加载结束
return;
}
this.loading = false; // 关闭加载状态
this.total = res.data.count;
this.list = this.list.concat(rows);
console.log(this.list);
// 如果合并之后的数组长度大于返回的数据总条数
if (this.list.length >= this.total) {
this.finished = true; // 加载结束
}
} catch (err) {
console.log("请求报错 :", err);
}
}
},
// 上拉加载
onLoad() {
this.pageNo += 1;
this.loadClientList();
},
// 切换tab时
clickTab() {
console.log(this.active);
this.list = [];
this.pageNo = 0;
this.loading = true;
this.finished = false;
this.onLoad();
}
}