列表 List

最基础的列表展示，可承载文字、列表、图片、段落，常用于后台数据展示页面。

安装

npm install @arco-design/web-react@2.66.18

在入口引入 @arco-design/web-react/dist/css/arco.css，用 ConfigProvider 设置语言。React 19 项目还需在入口最先引入 @arco-design/web-react/es/_util/react-19-adapter，否则 Message、Modal 等命令式 API 无法渲染。

示例

• 基本用法：最基础的列表展示，可承载文字、列表、图片、段落，常用于后台数据展示页面。
• 不同尺寸：设置 size 可以使用三种尺寸（small, default, large）的列表，可根据业务需求自行选择。
• 基础列表：使用 List.Item.Meta 可快速指定头像、标题、文字。
• 增加操作项：通过 actions 来为列表添加操作项。
• 竖排列表样式：这是一个包括分页、右侧内容、下方列表操作的示例。
• 栅格列表：通过 grid.span 设置期望每行展示的列数。
• 响应式栅格：通过 grid.sm 等响应式参数动态设置每个单项横跨的列数，注意此时不要设置 grid.span。
• 滚动加载列表：可设置 onReachBottom 来动态滚动加载列表。当 onReachBottom 无法满足需求，可通过 onListScroll 来自定义列表滚动监听函数，此时默认的滚动监听函数将失效。
• 无限长列表：通过指定 virtualListProps 来开启虚拟列表，在大量数据时获得高性能表现。 在使用虚拟列表时，如果列表元素之间高度变化较大可能导致滚动时视口出现空白区域，可以通过设定 virtualListProps.itemHeight 解决。itemHeight 用于计算实际需要渲染的 DOM 节点数目（视口高度 / 元素高度），其值越小实际渲染的 DOM 节点越多，性能开销也会随之增大。 由于虚拟列表内部使用到了 ListItem 的 ref，因此如果你通过 render 返回了一个自定义函数组件，请使用 React.forwardRef 包裹它。

示例来自 Arco Design 官方仓库（MIT），固定在 npm 2.66.18 对应的提交；部分示例使用在线图片或上传地址，预览中网络请求被禁用。

API

List

List.Item

List.Item.Meta

ListGridProps

type ListGridProps = {
  column?: number;
} & Pick<RowProps, "gutter" | "justify" | "align"> &
  Pick<
    ColProps,
    "span" | "offset" | "order" | "pull" | "push" | GridResponsiveBreakpoint
  >;

ListHandle

export type ListHandle = {
  dom: HTMLDivElement;
  scrollIntoView: (index: number) => void;
};

AvailableVirtualListProps

export type AvailableVirtualListProps = Pick<
  VirtualListProps<any>,
  | "height"
  | "itemHeight"
  | "threshold"
  | "isStaticItemHeight"
  | "scrollOptions"
  | "onScroll"
  | "wrapperChild"
>;

<ListGridProps>

VirtualListProps