React-vant List 组件：四行代码实现无限滚动列表

React-vant List 组件：四行代码实现无限滚动列表

react-vant 是一个基于 React 的移动端组件库，其中的 List 组件提供了强大的无限滚动功能。本文将详细介绍如何使用该组件实现各种列表功能。

基础用法

使用 List 组件实现无限滚动非常简单，只需要将要渲染的项目放在 <List></List> 标签内即可：

<List finished={finished} onLoad={onLoad}>
  {list.map((_, i) => (
    <Cell key={i} title={i + 1} />
  ))}
</List>

核心功能特性

1. 自动懒加载 - 当用户滚动到页面底部时自动加载更多数据
2. 加载控制 - 通过 onLoad 属性传递回调函数，在滚动到底部时触发
3. 完成状态 - finished 属性控制是否继续加载，设为 true 后停止加载
4. 下拉刷新 - 结合 PullRefresh 组件实现下拉刷新功能
5. 错误处理 - 通过 errorText 属性处理加载失败的情况
6. 内置优化 - 组件自动处理防抖节流，无需额外优化

完整示例代码

基础无限滚动列表

import React, { useState } from 'react'
import { List, Cell } from 'react-vant'

// 模拟异步请求
async function getData() {
  return new Promise<number[]>((resolve) => {
    setTimeout(() => {
      resolve(Array.from({ length: 10 }, (_, i) => i))
    }, 1000)
  })
}

const BaseDemo = () => {
  const [list, setList] = useState<Array<number>>([])
  const [finished, setFinished] = useState<boolean>(false)

  const onLoad = async () => {
    const data = await getData()
    setList(v => [...v, ...data])
    if (list.length >= 30) {
      setFinished(true)
    }
  }

  return (
    <List finished={finished} onLoad={onLoad}>
      {list.map((_, i) => (
        <Cell key={i} title={i + 1} />
      ))}
    </List>
  )
}

带错误处理的列表

const ErrorDemo = () => {
  const [list, setList] = useState < Array < number >> [];
  const [finished, setFinished] = useState < boolean > false;
  const [count, setCount] = useState(0);

  const onLoad = async () => {
    setCount((v) => v + 1);
    try {
      const data = await getData(count === 1);
      setList((v) => [...v, ...data]);
      if (list.length >= 30) {
        setFinished(true);
      }
    } catch (error) {
      // 错误将在 UI 中显示，用户可点击重试
    }
  };

  return (
    <List
      finished={finished}
      errorText="请求失败，点击重新加载"
      onLoad={onLoad}
    >
      {list.map((_, i) => (
        <Cell key={i} title={i + 1} />
      ))}
    </List>
  );
};

结合下拉刷新功能

import { PullRefresh, List, Cell } from "react-vant";

const PullRefreshDemo = () => {
  const [list, setList] = useState < Array < number >> [];
  const [finished, setFinished] = useState < boolean > false;

  const onLoadRefresh = async (isRefresh?: boolean) => {
    const data = await getData();
    setList((v) => {
      const newList = isRefresh ? data : [...v, ...data];
      if (newList.length >= 30) {
        setFinished(true);
      }
      return newList;
    });
  };

  const onRefresh = async () => {
    setFinished(false);
    await onLoadRefresh(true);
  };

  return (
    <PullRefresh onRefresh={onRefresh}>
      <List finished={finished} onLoad={onLoadRefresh}>
        {list.map((_, i) => (
          <Cell key={i} title={i + 1} />
        ))}
      </List>
    </PullRefresh>
  );
};

完整应用示例

import React from "react";
import { PullRefresh, List, Tabs, Cell } from "react-vant";
import "./style.less";

export default () => (
  <div className="demo-list">
    <Tabs sticky>
      <Tabs.TabPane title="基本用法">
        <BaseDemo />
      </Tabs.TabPane>
      <Tabs.TabPane title="错误提示">
        <ErrorDemo />
      </Tabs.TabPane>
      <Tabs.TabPane title="下拉刷新">
        <PullRefreshDemo />
      </Tabs.TabPane>
    </Tabs>
  </div>
);

关键属性说明

属性	类型	说明
finished	boolean	是否已加载完成，加载完成后不再触发 onLoad 事件
onLoad	() => Promise<void>	滚动条与底部距离小于 offset 时触发
errorText	ReactNode	加载失败后的错误提示文案
offset	number	滚动条与底部距离小于 offset 时触发 onLoad 事件

使用要点

1. 版本差异 - 在 "react-vant": "^3.3.5" 中，List 组件无需额外引入即可使用
2. 状态管理 - 需要自己管理 list 数据和 finished 状态
3. 错误处理 - 当 onLoad 返回的 Promise 被 reject 时，会显示错误提示
4. 性能优化 - 组件内部已实现防抖节流，开发者无需额外处理

通过以上介绍和示例，你可以轻松地在项目中使用 React-vant 的 List 组件实现功能丰富的无限滚动列表。