使用Vant框架list组件遇到的坑

介绍

Vant 是有赞前端团队开源的移动端组件库，于 2017 年开源，已持续维护 4 年时间。Vant 对内承载了有赞所有核心业务，对外服务十多万开发者，是业界主流的移动端组件库之一。

特性

提供 60 多个高质量组件，覆盖移动端各类场景
性能极佳，组件平均体积不到 1kb（min+gzip）
单元测试覆盖率 90%+，提供稳定性保障
完善的中英文文档和示例
支持 Vue 2 & Vue 3
支持按需引入
支持主题定制
支持国际化
支持 TypeScript
支持 SSR

快速配置和具体介绍请去官方文档，Vant框架在Github上点赞众多，用起来发现还是很好用的，强力推荐

官方文档：https://vant-contrib.gitee.io/vant/#/zh-CN/home

今天就聊一下使用list组件遇到的坑
官方文档的实例代码是这样的：

<van-list
  v-model="loading"
  :finished="finished"
  finished-text="没有更多了"
  @load="onLoad"
>
  <van-cell v-for="item in list" :key="item" :title="item" />
</van-list>

export default {
  data() {
    return {
      list: [],
      loading: false,
      finished: false,
    };
  },
  methods: {
    onLoad() {
      // 异步更新数据
      // setTimeout 仅做示例，真实场景中一般为 ajax 请求
      setTimeout(() => {
        for (let i = 0; i < 10; i++) {
          this.list.push(this.list.length + 1);
        }

        // 加载状态结束
        this.loading = false;

        // 数据全部加载完成
        if (this.list.length >= 40) {
          this.finished = true;
        }
      }, 1000);
    },
  },
};

效果图片：

可是！你复制代码，发现，发现完全不好用！这个定时任务简直看不懂，触底加载简直毫无逻辑，通过几个小时的研究，发现问题所在居然是CSS！对，你没有听错！是CSS导致的！

下方代码，重点看css部分，JS部分，记住settimeout不要去掉，不要相信他的注释，业务写在settimeout里就可以了
解释一下这个css的含义，就是van-list需要给他定义一个高度，并且滚动自适应，这样在不填满高度或者是滚动触底的时候就可以完美的触发onLoad时间了，这里还有一个重点！就是van-list的父级也要定义一下高度，不然也是不行的！
至于业务一定要在settimeout中写业务才能有效，了解的大佬看到了帮忙解释一下，不是很明白

<div class="txtc" style="height: 100%; position: fixed; width: 100%">
	<van-list style="height:100%;width:100%;overflow-y:auto;"
	        v-model="loading"
	        :finished="finished"
	        finished-text="没有更多了"
	        @load="onLoad"
	      >
	        <div class="divinfo" v-for="item in tableData" :key="item.sid"></div>
	</van-list>
</div>