網站首頁 編程語言 正文
一個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-05-25 文字解說Golang?Goroutine和線程的區別_Golang
- 2023-04-17 Python屬性私有化詳解_python
- 2022-06-12 Python閉包的使用方法_python
- 2022-09-08 Tomcat安裝shell腳本的方法步驟_Tomcat
- 2021-12-25 常用時間處理方法:時間戳和格式化時間之間轉換;時間比大小
- 2023-07-13 react中的useRef的使用
- 2023-07-03 Redis 中 List(列表)類型的命令及詳解
- 2023-02-17 python引入其他py文件或模塊_python
- 最近更新
-
- 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同步修改后的遠程分支