網站首頁 編程語言 正文
一個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();
}
}
原文鏈接:https://blog.csdn.net/weixin_49577940/article/details/125446889
相關推薦
- 2022-03-13 用Docker搭建nextcloud個人網盤教程_docker
- 2022-11-21 在react中使用windicss的問題_React
- 2023-01-07 Android?RecyclerLineChart實現圖表繪制教程_Android
- 2022-01-30 composer 安裝包,提示找不到對應的包,很奇怪的問題,備忘
- 2023-12-15 log4j.properties自定義日志配置
- 2023-10-14 C/C++ 批量梯度下降法實現一元線性回歸
- 2022-02-07 解決 laravels 無法接收微信回調的參數問題
- 2022-12-27 Android?Compose狀態改變動畫animateXxxAsState使用詳解_Android
- 最近更新
-
- window11 系統安裝 yarn
- 超詳細win安裝深度學習環境2025年最新版(
- Linux 中運行的top命令 怎么退出?
- MySQL 中decimal 的用法? 存儲小
- get 、set 、toString 方法的使
- @Resource和 @Autowired注解
- Java基礎操作-- 運算符,流程控制 Flo
- 1. Int 和Integer 的區別,Jav
- spring @retryable不生效的一種
- Spring Security之認證信息的處理
- Spring Security之認證過濾器
- Spring Security概述快速入門
- Spring Security之配置體系
- 【SpringBoot】SpringCache
- Spring Security之基于方法配置權
- redisson分布式鎖中waittime的設
- maven:解決release錯誤:Artif
- restTemplate使用總結
- Spring Security之安全異常處理
- MybatisPlus優雅實現加密?
- Spring ioc容器與Bean的生命周期。
- 【探索SpringCloud】服務發現-Nac
- Spring Security之基于HttpR
- Redis 底層數據結構-簡單動態字符串(SD
- arthas操作spring被代理目標對象命令
- Spring中的單例模式應用詳解
- 聊聊消息隊列,發送消息的4種方式
- bootspring第三方資源配置管理
- GIT同步修改后的遠程分支