切换tab时,van-list中的onload事件没触发

本文介绍了如何在Vue.js应用中使用van-tabs组件切换Tab时动态加载不同参数的列表数据,并解决切换时不触发加载事件的问题。通过清空列表、重置加载状态并调用上拉加载方法实现数据刷新。同时,展示了添加搜索框并根据搜索词更新列表的方法。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

一个tab栏,三个tab , 需求 : 切换tab时对应的列表数据变化 (发请求时携带参数不同)

 发现切换tab时没有触发onload上拉加载事件,没有请求下一页数据 。  解决 : 切换tab时,需把之前的list置空, 再重新设置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();
    }
}

页面加搜索框 ,根据搜索词更新list



        <van-tab title="员工统计">
          <van-search
            v-model="search_value"
            show-action
            placeholder="请输入员工姓名"
            @search="onSearch"
          >
            <template #action>
              <div @click="onSearch">搜索</div>
            </template>
          </van-search>

           // 下面是van-list的代码

        </van-tab>

data(){

search_value: "",

}



   // 搜索
    onSearch() {
      this.list = [];
      this.pageNo = 0;
      this.loading = true;
      this.finished = false;
      this.onLoad();
    },

请求数据的代码加上搜索词传参

const { data: res } = await getClientList({
            pageNo: this.pageNo,
            pageSize: this.pageSize,
            value: this.search_value
});

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值