遇到的问题：

van-list 加载，页面上有个切换的 van-tab，实现切换不同的类型，加载不同的list的功能。

Vant2 的 List 列表 就有个 bug，当切换 tab 的时候，它的 onload 没有自动触发。

然而在当前标签页，如果列表已经加载完毕再去切换，onload 就可以实现自动触发

---

真实项目复现问题 ：

三种tab切换类型列表，默认展示列表，上拉到底会正常触发 @load="onLoad" 加载方法，

但是当点击切换Tab标签页列表类型时，再切换回来，上拉至列表底部时

不再触发 @load="onLoad" 加载方法，

（ 一开始以为是页面高度导致的问题，排查到最后发现并不是，因为如果是高度有问题的话，那一开始拉到底部也并不会触发加载方法了，So 最后百度了一波，整理一下吧 ）

---

项目实际解决方案：

切换时 将 finished 状态重置为 false 。

---

index.vue

<template>
  <div class="tl">
    <div ref="TabList">
      <van-tabs @click="onTabClick" v-model="tlForm.flag">
        <van-tab
          v-for="(item, index) in ['list1', 'list2', 'list3']"
          :title="item"
          :key="index"
        >
          <TabList
            :ref="'tabList' + index"
            :tlData="TabListData"
            :loading="Loading"
            :finished="Finished"
            :refreshing.sync="Refreshing"
            @onLoad="onLoad"
            @onRefresh="onRefresh"
          />
        </van-tab>
      </van-tabs>
    </div>
  </div>
</template>

<script>
import TabList from './TabList.vue';
import { getDataListApi } from '@api/index';

export default {
  components: { TabList },
  data() {
    return {
      Loading: false,
      Finished: false,
      Refreshing: false,
      TabListData: [],
      total: 0, // 总页数
      tlForm: {
        page: 1, // 分页第几页
        pageSize: 10, // 每页数据数
        flag: 0, // 标签类型
      },
    };
  },
  created() {
    this.onLoad();
  },
  methods: {
    onTabClick(index) {
      // this.Loading = true; // 项目影响不大
      // 需将Finished状态重置，否则切换再上拉时不加载
      this.Finished = false; //关键代码
      this.tlForm.flag = index;
      this.$nextTick(() => {
        this.TabListData = [];
        this.tlForm.page = 1;
        this.tlForm.pageSize = 10;
        this.onLoad();
      });
    },
    // 下拉刷新时重置参数
    onRefresh() {
      this.Loading = true;
      this.Finished = false;
      this.tlForm.page = 1;
      this.TabListData = [];
      this.onLoad();
    },
    // 加载 获取列表信息
    onLoad() {
      this.getDataList();
    },
    async getDataList() {
      if (this.Refreshing) {
        this.Refreshing = false;
        this.TabListData = [];
      }
      let { code, res } = await getDataListApi(this.tlForm);
      if (code === 0) {
        this.total = res.total;
        this.TabListData = this.TabListData.concat(res.list);
        this.Loading = false; // 加载状态结束
        if (this.TabListData.length >= this.total) {
          this.Finished = true; // 没有更多数据了
        } else {
          this.tlForm.page += 1;
        }
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.tl {
  height: 100%;
}
</style>

TabList.vue

<template>
  <div class="tabList">
    <van-pull-refresh
      v-model="refreshingProps"
      success-text="刷新成功"
      @refresh="onRefresh"
    >
      <van-list
        v-if="tlData.length > 0"
        v-model="loadingProps"
        :offset="20"
        :finished="finished"
        :immediate-check="false"
        finished-text="没有更多了"
        @load="onLoad"
      >
        <!-- 列表详细内容 -->
      </van-list>
      <div v-else>暂无内容</div>
    </van-pull-refresh>
  </div>
</template>

<script>
export default {
  props: {
    tlData: {
      // 列表数据
      type: Array,
      default: () => [],
    },
    finished: {
      type: Boolean,
      default: false,
    },
    loading: {
      type: Boolean,
      default: false,
    },
    refreshing: {
      type: Boolean,
      default: false,
    },
  },
  watch: {
    loading(newVal) {
      this.loadingProps = newVal;
    },
    loadingProps(newVal) {
      this.$emit('update:loading', newVal);
    },
    refreshing(newVal) {
      this.refreshingProps = newVal;
    },
    refreshingProps(newVal) {
      this.$emit('update:refreshing', newVal);
    },
  },
  data() {
    return {
      loadingProps: false,
      refreshingProps: false,
    };
  },
  methods: {
    onLoad() {
      this.$emit('onLoad');
    },
    onRefresh() {
      this.$emit('onRefresh');
    },
  },
};
</script>

<style lang="scss" scoped>
.tabList {
  height: 100%;
}
</style>