vue 使用Tab 标签页和PullRefresh 下拉刷新,第一次切换tab下拉刷新loading-text加载过程文案不存在

时间:2019-01-11
本文章向大家介绍vue 使用Tab 标签页和PullRefresh 下拉刷新,第一次切换tab下拉刷新loading-text加载过程文案不存在,主要包括vue 使用Tab 标签页和PullRefresh 下拉刷新,第一次切换tab下拉刷新loading-text加载过程文案不存在使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。

.vue

 <van-tabs
        v-model="activeTab"
        @change="tabChange"
        :line-width="80"
        color="#3fcc8e"
        animated
        swipeable
      >
        <van-tab title="XXXX" v-if="isLeader">
          <div class="vanTabContentContainer" :style="{ height: tabContentHeight + 'px' }">
            <van-pull-refresh
              v-model="isLoadingSubordinateRefresh"
              @refresh="loadSubordinateVisitDatas"
            >
              <van-list
                v-model="isLoadingSubordinateNext"
                :finished="finishedSubordinate"
                :immediate-check="false"
                finished-text="没有更多了"
                @load="loadNextSubordinateVisitDatas"
                class="crmVanList"
              >
              </van-list>
            </van-pull-refresh>
          </div>
        </van-tab>
        <van-tab title="XXXX">
          <div class="vanTabContentContainer" :style="{ height: tabContentHeight + 'px' }">
            <van-pull-refresh
              v-model="isLoadingSubordinateRefresh"
              @refresh="loadSubordinateVisitDatas"
            >
              <van-list
                v-model="isLoadingSubordinateNext"
                :finished="finishedSubordinate"
                :immediate-check="false"
                finished-text="没有更多了"
                @load="loadNextSubordinateVisitDatas"
                class="crmVanList"
              >
              </van-list>
            </van-pull-refresh>
          </div>
        </van-tab>
      </van-tabs>

.ts  为方法加上nextTick方法,使页面节点渲染完毕后,进行操作

  mounted() {
    this.$nextTick(function() {
      this.onActiveTabChange(this.activeTab, "");
    });
  }

  private tabChange() {
    this.$nextTick(function() {
      this.onActiveTabChange(this.activeTab, "");
    });
  }