List 列表 #

概述 #

List 列表组件用于展示数据列表，支持多种布局方式，可以配合分页、加载等功能使用。

基础用法 #

基本列表 #

tsx

import { List } from 'antd';

const data = [
  '列表项1',
  '列表项2',
  '列表项3',
  '列表项4',
];

<List
  dataSource={data}
  renderItem={(item) => (
    <List.Item>{item}</List.Item>
  )}
/>

基础列表 #

tsx

import { List, Avatar } from 'antd';

const data = [
  {
    title: '标题一',
    avatar: 'https://joeschmoe.io/api/v1/random',
    description: '描述信息',
  },
  {
    title: '标题二',
    avatar: 'https://joeschmoe.io/api/v1/random',
    description: '描述信息',
  },
];

<List
  itemLayout="horizontal"
  dataSource={data}
  renderItem={(item) => (
    <List.Item>
      <List.Item.Meta
        avatar={<Avatar src={item.avatar} />}
        title={<a href="#">{item.title}</a>}
        description={item.description}
      />
    </List.Item>
  )}
/>

竖排列表 #

tsx

import { List, Avatar, Space } from 'antd';
import { LikeOutlined, MessageOutlined, StarOutlined } from '@ant-design/icons';

const listData = [
  {
    href: 'https://ant.design',
    title: `标题一`,
    avatar: 'https://joeschmoe.io/api/v1/random',
    description: '描述信息',
    content: '内容详情',
  },
];

const IconText = ({ icon, text }) => (
  <Space>
    {React.createElement(icon)}
    {text}
  </Space>
);

<List
  itemLayout="vertical"
  size="large"
  dataSource={listData}
  renderItem={(item) => (
    <List.Item
      key={item.title}
      actions={[
        <IconText icon={StarOutlined} text="156" key="star" />,
        <IconText icon={LikeOutlined} text="156" key="like" />,
        <IconText icon={MessageOutlined} text="2" key="message" />,
      ]}
      extra={
        <img
          width={272}
          alt="logo"
          src="https://gw.alipayobjects.com/zos/rmsportal/mqaQswcyDLcXyDKnZfES.png"
        />
      }
    >
      <List.Item.Meta
        avatar={<Avatar src={item.avatar} />}
        title={<a href={item.href}>{item.title}</a>}
        description={item.description}
      />
      {item.content}
    </List.Item>
  )}
/>

加载更多 #

tsx

import { List, Button, Skeleton } from 'antd';
import { useState, useEffect } from 'react';

const App = () => {
  const [loading, setLoading] = useState(false);
  const [data, setData] = useState([]);

  const onLoadMore = () => {
    setLoading(true);
    fetchMoreData().then((newData) => {
      setData([...data, ...newData]);
      setLoading(false);
    });
  };

  const loadMore = !loading ? (
    <div style={{ textAlign: 'center', marginTop: 12, height: 32 }}>
      <Button onClick={onLoadMore}>加载更多</Button>
    </div>
  ) : null;

  return (
    <List
      loading={loading}
      loadMore={loadMore}
      dataSource={data}
      renderItem={(item) => (
        <List.Item>
          <Skeleton avatar title={false} loading={loading} active>
            <List.Item.Meta
              avatar={<Avatar src={item.avatar} />}
              title={item.title}
              description={item.description}
            />
          </Skeleton>
        </List.Item>
      )}
    />
  );
};

分页 #

tsx

import { List } from 'antd';

<List
  pagination={{
    onChange: (page) => {
      console.log(page);
    },
    pageSize: 3,
  }}
  dataSource={data}
  renderItem={(item) => (
    <List.Item>{item}</List.Item>
  )}
/>

栅格列表 #

tsx

import { List, Card } from 'antd';

<List
  grid={{
    gutter: 16,
    column: 4,
  }}
  dataSource={data}
  renderItem={(item) => (
    <List.Item>
      <Card title={item.title}>{item.content}</Card>
    </List.Item>
  )}
/>

响应式栅格 #

tsx

import { List, Card } from 'antd';

<List
  grid={{
    gutter: 16,
    xs: 1,
    sm: 2,
    md: 4,
    lg: 4,
    xl: 6,
    xxl: 3,
  }}
  dataSource={data}
  renderItem={(item) => (
    <List.Item>
      <Card title={item.title}>{item.content}</Card>
    </List.Item>
  )}
/>

API #

List #

属性	说明	类型	默认值
bordered	是否有边框	boolean	false
dataSource	数据源	any[]	-
footer	列表底部	ReactNode	-
grid	栅格配置	object	-
header	列表头部	ReactNode	-
itemLayout	布局方式	`horizontal` \| `vertical`	`horizontal`
loading	加载状态	boolean \| SpinProps	false
loadMore	加载更多	ReactNode	-
locale	国际化配置	object	-
pagination	分页配置	PaginationConfig \| false	false
renderItem	自定义项	(item, index) => ReactNode	-
rowKey	行 key	string \| (item) => string	-
size	列表大小	`default` \| `small` \| `large`	`default`
split	是否分割	boolean	true

List.Item #

属性	说明	类型	默认值
actions	操作列表	ReactNode[]	-
extra	额外内容	ReactNode	-

List.Item.Meta #

属性	说明	类型	默认值
avatar	头像	ReactNode	-
description	描述	ReactNode	-
title	标题	ReactNode	-

Grid #

属性	说明	类型	默认值
column	列数	number \| object	-
gutter	间距	number	0
xs	<576px 列数	number	-
sm	≥576px 列数	number	-
md	≥768px 列数	number	-
lg	≥992px 列数	number	-
xl	≥1200px 列数	number	-
xxl	≥1600px 列数	number	-

最佳实践 #

1. 配合 Card 使用 #

tsx

import { List, Card } from 'antd';

<List
  grid={{ gutter: 16, column: 4 }}
  dataSource={data}
  renderItem={(item) => (
    <List.Item>
      <Card hoverable cover={<img src={item.image} />}>
        <Card.Meta title={item.title} description={item.description} />
      </Card>
    </List.Item>
  )}
/>

2. 无限滚动 #

tsx

import { List, Spin } from 'antd';
import { useState, useEffect, useRef } from 'react';

const InfiniteList = () => {
  const [data, setData] = useState([]);
  const [loading, setLoading] = useState(false);
  const [hasMore, setHasMore] = useState(true);
  const containerRef = useRef(null);

  const handleScroll = () => {
    if (loading || !hasMore) return;
    const { scrollTop, clientHeight, scrollHeight } = containerRef.current;
    if (scrollTop + clientHeight >= scrollHeight - 10) {
      loadMoreData();
    }
  };

  return (
    <div ref={containerRef} onScroll={handleScroll} style={{ height: 400, overflow: 'auto' }}>
      <List dataSource={data} renderItem={(item) => <List.Item>{item}</List.Item>} />
      {loading && <Spin />}
    </div>
  );
};

下一步 #

接下来学习 Card 卡片组件！