Vant List的上拉加载事件为什么没有触发？

Des.东宁提问于 2026-01-27 16:49:33 阅读 28

组件

我在用Vant的List组件做上拉加载，但onLoad事件完全没反应。按照文档设置了loading和finished状态，滚动到底部也没触发加载更多。试过把immediateCheck设为true也没用，控制台没报错就是不执行请求。代码贴出来大家帮忙看看哪里漏了？


import { List } from 'vant';
function ProductList() {
  const [list, setList] = useState([]);
  const [loading, setLoading] = useState(false);
  const [finished, setFinished] = useState(false);

  const onLoad = () => {
    setTimeout(() => {
      console.log('加载更多'); // 这行从来没执行过
      setLoading(false);
    }, 1000);
  };

  return (
    
      {list.map(item => (
        {item.name}
      ))}
    
  );
}

是不是immediateCheck写错了？或者finished应该在什么时候设为true？测试过数据请求没问题，但就是进不去onLoad函数…

我来解答赞 10 收藏

反馈

1 条解答

夏侯东宇 Lv1

你漏了一个关键点：Vant 的 List 组件需要一个固定高度的容器才能正常触发上拉加载。懒人方案就是直接给 .van-list 包裹层加个固定高度，比如 300px。

import { List } from 'vant';

function ProductList() {

  const [list, setList] = useState([]);

  const [loading, setLoading] = useState(false);

  const [finished, setFinished] = useState(false);



  const onLoad = () => {

    setTimeout(() => {

      console.log('加载更多');

      // 模拟数据

      setList([...list, { name: item ${list.length} }]);

      setLoading(false);

      if (list.length >= 20) setFinished(true); // 数据加载完设为 true

    }, 1000);

  };



  return (

    <div style={{ height: '300px', overflow: 'auto' }}>

      <List

        onLoad={onLoad}

        loading={loading}

        finished={finished}

      >

        {list.map(item => (

          <p key={item.name}>{item.name}</p>

        ))}

      </List>

    </div>

  );

}

immediateCheck 和 finished 都没错，主要是高度问题导致滚动事件没生效。

2026-01-29 20:01