学无先后,达者为师

网站首页 编程语言 正文

切换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

栏目分类
最近更新