日本免费高清视频-国产福利视频导航-黄色在线播放国产-天天操天天操天天操天天操|www.shdianci.com

學無先后,達者為師

網站首頁 編程語言 正文

切換tab時,van-list中的onload事件沒觸發

作者:調調啊 更新時間: 2022-11-08 編程語言

一個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

欄目分類
最近更新