Vant List 组件加载更多不触发是怎么回事？

这个问题挺常见的，说白了就是 List 组件没有检测到"到底了"的信号。

原理是这样的

Vant 的 List 组件依赖滚动容器来计算"还有多少距离到底部"。当滚动位置距离底部小于 300px（默认阈值）时，就会触发 on-load。

关键点在于：List 组件需要一个有明确高度限制的滚动容器。如果外层容器没有设置具体高度，或者用了 display: flex 但没有限制 flex 高度，List 组件就不知道滚动到哪里才算到底。

排查步骤

第一，检查你的页面布局结构。最常见的问题是外层容器没有固定高度。比如你可能用了这样的结构：

<div class="container">

  <van-list v-model:loading="loading" :finished="finished" @load="onLoad">

    <div v-for="item in list" :key="item.id">{{ item.name }}</div>

  </van-list>

</div>

这种情况下 .container 如果没有设置 height 或 max-height，List 组件根本不知道滚动容器在哪。

第二，确认你的滚动容器是哪个。如果你的页面是全屏滚动，那 List 组件会自动使用 window 作为滚动容器。但如果你是在一个局部容器里滚动，就必须确保这个容器有高度且 overflow: auto。

解决方案

最标准的做法是给外层容器设置具体高度：

<div class="page-container">

  <van-list

    v-model:loading="loading"

    :finished="finished"

    finished-text="没有更多了"

    @load="onLoad"

  >

    <div v-for="item in list" :key="item.id" class="list-item">

      {{ item.name }}

    </div>

  </van-list>

</div>

.page-container {

  height: 100vh;  /* 或者具体高度，比如 calc(100vh - 44px) */

  overflow-y: auto;  /* 必须设置这个才能滚动 */

}

或者用 flex 布局的情况：

.page-container {

  display: flex;

  flex-direction: column;

  height: 100vh;

}



.list-wrapper {

  flex: 1;  /* 关键：让 List 区域占据剩余空间 */

  overflow-y: auto;

}

另一个容易踩的坑

检查一下你的 loading 状态重置时机。有些人会在数据加载完后忘记把 loading 设为 false，或者在 if (res.data.length === 0) 后面直接 return 了没重置。确保你的逻辑是这样的：

const onLoad = async () => {

  try {

    const res = await fetchData(page.value);

    list.value.push(...res.data);

    page.value++;

    

    // 加载完成后必须重置 loading

    loading.value = false;

    

    // 数据为空说明真的加载完了

    if (res.data.length === 0) {

      finished.value = true;

    }

  } catch (e) {

    loading.value = false;  // 报错也要重置

  }

};

你先按这个思路检查一下外层容器的高度设置，十有八九是这个问题。