vue中使用vant实现上拉刷新下拉加载（二）（六种数据来回切换）

先上图

下面上传代码：

首先html部分

        <van-pull-refresh v-model="isDownLoading" @refresh="onRefresh">
          <van-list
            v-model="isUpLoading"
            :finished="upFinished"
            @load="onUpRefreshLoad"
            offset="20"
            :finished-text="textUpFinish"
          >
            // idxTabFirst=0  金额
            <div v-if=" idxTabFirst == 0">
            // 是我自己封装的显示数据项的组件
              <card-info
                v-for="(item, index) in dataList "
                :key="getListKeyValue(index)"
                :obj="item"
              ></card-info>
            </div>
            // idxTabFirst= 1  客户
            <div v-if=" idxTabFirst == 1">
              <card-info
                v-for="(item, index) in dataList"
                :key="getListKeyValue(index)"
                :obj="item"
              ></card-info>
            </div>
            // idxTabFirst= 2  订单
            <div v-if=" idxTabFirst == 2">
              <card-info v-for="(item,index) in dataList" :key="getListKeyValue(index)" :obj="item" :mtype="itemType"></card-info>
            </div>
          </van-list>
        </van-pull-refresh>

所涉及的变量：

      // 一级tab的名称
      arrTabFirst: [
        { name: "金额", key: 0, title: "总金额（CNY）" },
        { name: "客户", key: 1, title: "总客户（CSR）" },
        { name: "订单", key: 2, title: "总订单（CSR）" },
      ],
      arrTabSecond: [
        { name: "左边", value: "0", icon: "iconlaokehu", key: 1 },
        { name: "右边", value: "0", icon: "iconkehu-copy", key: 2 },
      ],
      // 二级tab的名称
      allTabName: [
        [{ name: "直接金额" }, { name: "裂变金额" }],
        [{ name: "直接客户" }, { name: "裂变客户" }],
        [{ name: "未核销订单" }, { name: "已核销订单" }],
      ],
      page: 0,
      pageSize: 10,
      isDownLoading: false, // 下拉刷新
      isUpLoading: true, // 上拉加载
      upFinished: false, // 上拉加载完毕
      maxDays: 1000 * 60 * 60 * 24 * 360,
      dataMinDate: new Date().getTime(),
      textUpFinish: "没有更多了",

初始化参数

    // 初始化参数
    initPageParams() {
      this.dataList = [];
      this.page = 0;
      this.upFinished = false;
      this.dataMinDate = new Date().getTime();
    },

改变二级tab的数字

    // 改变二级tab的数字
    changeSencondTabValue(valLeft, valRight) {
      this.arrTabSecond[0].value = valLeft;
      this.arrTabSecond[1].value = valRight;
    },

切换一级tab即（金额，客户，订单）

    // 切换一级tab
    tabClick(item) {
      this.idxTabFirst = item.key;
      this.title = item.title;
      this.arrTabSecond[0].name = this.allTabName[item.key][0].name;
      this.arrTabSecond[1].name = this.allTabName[item.key][1].name;
      // 由idxTab判定
      if (this.idxTabFirst == 0) {
        // 展示资金列表
        this.initExpendData();
      } else if (this.idxTabFirst == 1) {
        // 展示客户列表
        this.initUserData();
      } else {
        //展示订单列表
        this.initOrderData();
      }
    },

切换二级tab

    // 切换二级tab
    arrTabSecondBtn(index) {
      this.initPageParams();
      this.keyTabSecond = index;
      if (this.idxTabFirst == 0) {
      //  axiosExpendList请求资金数据的方法
        this.axiosExpendList(this.cbStopUpRefresh);
      } else if (this.idxTabFirst == 1) {
      //  axiosExpendList请求客户数据的方法
        this.axiosUserList(this.cbStopUpRefresh);
      } else {
      //  axiosExpendList请求订单数据的方法
        this.axiosOrderList(this.cbStopUpRefresh);
      }
    },

这是上拉加载方法

    // 上划加载
    onUpRefreshLoad() {
      const currentDate = new Date();
      if (this.dataMinDate < currentDate - this.maxDays) {
        this.upFinished = true;
        this.textUpFinish = "请登录PC端查看更多数据";
        return;
      }

      setTimeout(() => {
        if (this.idxTabFirst == 0) {
          this.axiosExpendList(this.cbStopUpRefresh);
        } else if (this.idxTabFirst == 1) {
          this.axiosUserList(this.cbStopUpRefresh);
        } else if (this.idxTabFirst == 2) {
          this.axiosOrderList(this.cbStopUpRefresh);
        }
      }, 1000);
    },

    cbStopDownRefresh(res) {
      this.$toast("刷新成功");
      this.isDownLoading = false;
      this.cbStopUpRefresh(res);
    },

这里是下拉刷新方法

    onRefresh() {
      this.initPageParams();
      if (this.idxTabFirst == 0) {
        this.axiosExpendList(this.cbStopDownRefresh);
      } else if (this.idxTabFirst == 1) {
        this.axiosUserList(this.cbStopDownRefresh);
      } else {
        this.axiosOrderList(this.cbStopDownRefresh);
      }
    },

判断数据加载是否结束方法

    // 判断数据加载是否结束
    cbStopUpRefresh(res) {
      if (res.code == "0000") {
        // 判断是否为空
        if (!this.$isEmpty(res.data)) {
          for (var i = 0; i < res.data.length; i++) {
            this.dataList.push(res.data[i]);
            // 筛选数据。我们页面上仅展示近一年的数据
            const gmtCreate = res.data[i].gmtCreate;
            if (gmtCreate < this.dataMinDate) {
              this.dataMinDate = gmtCreate;
            }
          }
        }
        // 判断是否结束
        if (
          this.$isEmpty(res.data) ||
          res.data.length == 0 ||
          res.data.length < this.pageSize
        ) {
          this.upFinished = true;
        } else {
          this.isUpLoading = false;
        }
      }
    },

重要

当下拉刷新上滑加载实现以后，你会发现你的页面中会出现别的问题。
页面切换的时候有的数据不能正常显示。但是他的数据实际上是变了的，但是页面上没有同步更新。
出现这个问题的原因是你切换页面的数据可能刚好key值和上一个tab页对应位置的key值一样，所以vue就直接用了上个页面的数据。造成 了数据不正常显示的问题。

两种方法解决：
1.vue强制刷新， this.$forceUpdate();
2.改变key值，使每一项的数据的key值都不一样

下面是我所用的方法

    getListKeyValue(value) {
      return this.idxTabFirst + "-" + this.keyTabSecond + "-" + value;
    },