vant中list加载异常问题

最近看list加载问题看了好久，也想了很多方法，最后自己又写了一个小demo，你们可以试一下

<template>
  <div class="home">
    <van-tabs v-model="active" @change="change">
      <van-tab title="标签 1"></van-tab>
      <van-tab title="标签 2"></van-tab>
    </van-tabs>
    <van-list
      ref="listout"
      v-model="loading"
      :finished="finished"
      finished-text="没有更多了"
      @load="onLoad"
    >
      <van-cell v-for="item in list" :key="item" :title="item" />
    </van-list>
  </div>
</template>

<script>
// @ is an alias to /src
import HelloWorld from "@/components/HelloWorld.vue";

export default {
  name: "HomeView",
  components: {
    HelloWorld,
  },
  data() {
    return {
      active: 0,
      list: [],
      loading: false,
      finished: false,
    };
  },
  methods: {
    change(value) {
      console.log(value);
      this.list = [];
      this.finished = false;

      // if (this.finished === true) {
      // this.finished = false;
      // } else {
      // this.queryData();
      // }
    },
    onLoad() {
      this.queryData();
    },
    queryData() {
      // 异步更新数据
      setTimeout(() => {
        //十个并没有铺满整个屏幕--换成20铺满整个屏幕效果一样
        console.log("发送了数据请求" + this.active);
        for (let i = 0; i < 10; i++) {
          this.list.push(this.list.length + 1);
        }
        // 加载状态结束
        this.loading = false;
        // 数据全部加载完成
        if (this.list.length >= 60) {
          this.finished = true;
        }
      }, 500);
    },
  },
};
</script>
<style lang="less" scoped>
.home {
  width: 100%;
  height: calc(100% - 78px);
  overflow-y: auto; //这一句很重要
}
</style>

如果还有问题，可以试试我methods注释的if判断，注意vant是可以自动检测触底的，如果想要关掉使用immediate-check设为false

第二种方式（不推荐）就比较考验数据的加载量，比如下边的20改成15就不足以撑起盒子

<template>
  <div class="home">
    <van-tabs v-model="active" @change="change">
      <van-tab title="标签 1"></van-tab>
      <van-tab title="标签 2"></van-tab>
    </van-tabs>
    <van-list
      ref="listout"
      v-model="loading"
      :finished="finished"
      finished-text="没有更多了"
      :immediate-check="false"
      @load="onLoad"
    >
      <van-cell v-for="item in list" :key="item" :title="item" />
    </van-list>
  </div>
</template>

<script>
// @ is an alias to /src
import HelloWorld from "@/components/HelloWorld.vue";

export default {
  name: "HomeView",
  components: {
    HelloWorld,
  },
  data() {
    return {
      active: 0,
      list: [],
      loading: false,
      finished: false,
    };
  },
  created() {
    this.onLoad();
  },
  methods: {
    change(value) {
      console.log(value);
      this.list = [];
      this.finished = false;
      this.queryData();
      // if (this.finished === true) {
      //   this.finished = false;
      // } else {
      //   this.queryData();
      // }
    },
    onLoad() {
      this.queryData();
    },
    queryData() {
      // 异步更新数据
      setTimeout(() => {
        console.log("发送了数据请求" + this.active);
        for (let i = 0; i < 20; i++) {
          this.list.push(this.list.length + 1);
        }
        // 加载状态结束
        this.loading = false;
        if (this.list.length >= 40) {
          this.finished = true;
        }
      }, 500);
    },
  },
};
</script>
<style lang="less" scoped>
.home {
  width: 100%;
  // height: calc(100vh - 78px);
  // overflow-y: auto;
}
</style>