vant4 Tab 标签页切换数据

原创已于 2023-10-17 14:33:01 修改 · 1.5k 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#vue #前端框架

于 2023-10-17 14:28:27 首次发布

vant 专栏收录该内容

1 篇文章

订阅专栏

本文介绍了如何在Vue应用中使用Tab标签页、粘性布局、列表的滚动加载以及下拉刷新功能，包括v-model绑定、事件处理和数据请求的实现。

Tab 标签页切换数据

active表示标签的值，通过 sticky 属性可以开启粘性布局，粘性布局下，标签页滚动到顶部时会自动吸顶。

List 列表

当列表即将滚动到底部时，会触发事件（@load）并加载更多列表项。当组件滚动到底部时，会触发 load 事件并将 loading 设置成 true。此时可以发起异步操作并更新数据，数据更新完毕后，将 loading 设置成 false 即可。若数据已全部加载完毕，则直接将 finished 设置成 true 即可

PullRefresh 下拉刷新

下拉刷新时会触发 refresh 事件，在事件的回调函数中可以进行同步或异步操作，操作完成后将 v-model 设置为 false，表示加载完成。

<van-tabs v-model:active="active" sticky @click-tab="onClickTab">
      <van-tab
        v-for="(item, index) in navList"
        :title="item.title"
        :name="item.name"
        :key="index"
      >
        <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
          <van-list
            v-model:loading="loading"
            :finished="finished"
            finished-text="没有更多了"
            @load="onLoad"
            offset="10"
          >
            <OrderShop :companyList="companyList" :list="list" @close="load" />
          </van-list>
        </van-pull-refresh>
      </van-tab>
    </van-tabs>

export default {
  data() {
    return {
      active: 0,
       navList: [
       { title: "全部", name: 0 },
        { title: "待发货", name: 2 },
        { title: "已完成", name: 127 },
        { title: "已售后", name: -126 }，
      ],
      list: [],
      token: "",
      loading: false,
      finished: false,
      pageNo: 1,
      length: 0,
      total: 0,
      companyList: [],
      refreshing: false,
   };
  },
  mounted() {
    this.init(this.active);
  },
  onClickTab({ title, name }) {
      this.list = [];
      this.pageNo = 1;
      this.loading = true;
      this.finished = false;
      this.init(name);
    },
    //上拉刷新
    onRefresh() {
      this.finished = false;
      this.loading = true;
      this.pageNo = 1;
      this.list = [];
      this.init(this.active);
    },
    //下拉加载
    onLoad() {
      console.log("onLoad加载更多~");
      setTimeout(() => {
        if (this.length >= this.total) {
          this.finished = true;
        } else {
          this.pageNo++;
          this.init(this.active);
        }
      }, 1000);
    },
    //请求数据
    init(status) {
      this.loading = true;
      let query = {
        pageNo: this.pageNo,
        pageSize: 10,
        status: status,
        supplierToken: this.token,
      };
      http
        .post("p", query)
        .then((res) => {
          if (res.code == 200) {
            this.loading = false;
            let list = [...this.list, ...res.data.list];
            this.list = list;
            this.length = list.length;
            this.total = res.data.total;
            if(this.refreshing){
              this.refreshing=false
            }
          }
        })
        .catch((err) => {
          showToast(JSON.stringify(err));
        });
    },
}