vant 结合 tabs 实现上拉加载 下拉刷新

vant 结合 tabs 实现上拉加载 下拉刷新

<template>
  <div>
    <van-tabs @click="handleClick">
      <van-tab v-for="(item, index) in types" :key="index" :title="item.name">
        <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
          <van-list
            v-model="loading"
            :finished="finished"
            :immediate-check="false"
            finished-text="没有更多了"
            @load="onLoad"
          >
            <!-- 这里是要展示的页面内容 -->
          </van-list>
        </van-pull-refresh>
      </van-tab>
    </van-tabs>
    
  </div>
</template>

<script>
import dayjs from 'dayjs'   
export default {
    
    
  name: "index",
  components: {
    
    },
  data() {
    
    
    return {
    
    
      // tabs数据，应该让后端返回
      types: [
        {
    
    
          name: "我发起的",
          state: 1,
        },
        {
    
    
          name: "我的会议",
          state: 2,
        },
        {
    
    
          name: "已完成会议",
          state: 3,
        },
        
      ],
      page: 1, //当前页码
      pageSize: 10, //每页数量
      total: 0, //数据总量
      list: [], //数据列表
      loading: false, //是否加载下一页
      finished: false, //是否加载完了
      refreshing: false, //是否执行下拉刷新
      state: 1, //当前 tab标识
    };
  },


  methods: {
    
    
    // 上拉加载处理函数
    onLoad() {
    
    
     this.page++;
      this.getList();
    },
    // 下拉刷新处理函数
    onRefresh() {
    
    
      this.page = 1;
      this.getList();
    },
    /**tab 切换事件*/
    handleClick(name) {
    
    
      this.page = 1;
      this.state = name +1;
      this.queryParams.pageNum = 1
      // 别忘了清空列表并返回到顶部
      this.list=[]
      document.documentElement.scrollTop = 0
     this.getList();
    },
    // 分页数据列表
    getList() {
    
    
      this.$toast.loading({
    
    
        duration: 0,
        forbidClick: true,
        message: '加载中...',
      });

      this.$http
        .post('www.baidu.com/api/list', {
    
     
          rangeType: this.state,
          page: this.page,
          pageSize: this.pageSize,
        })
        .then((res) => {
    
    
          this.$toast.clear();
          this.refreshing = false;
          this.loading = false;
          this.total = res.data.total;

          // 判断空数据和不够10条数据情况
          if (this.list.length == 0||this.list.length>=this.total) {
    
    
            this.finished = true
            this.page = 1
          }else{
    
    
            this.finished = false
          }

          // 判断 tab 切换情况（根据个人需求）
          if(res.state==0){
    
                
            if (this.page == 1) {
    
    
              this.list = res.data.list;
            } else {
    
    
              // 获取到的数据要合并到原来的数据数组中，一起展示
              this.list.push(...res.data.list);

              // 上面也可以不判断直接下面这样写，也可以合并数据
              // this.list = this.list.concat(res.data.rows)
              // this.list = [...this.list,...res.data.rows]
            }
          }
        });
    }
  },
  created() {
    
    
    this.getList();
  },
};
</script>