List列表

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

    简单列表

    列表拥有大、中、小三种尺寸。

    通过设置 为 large small 分别把按钮设为大、小尺寸。若不设置 size，则尺寸为中。

    可通过设置 header 和 footer，来自定义列表头部和尾部。

    List 列表 - 图2

    基础列表。

    1. import { List, Avatar } from 'antd';
    3. const data = [
    4.   {
    5.     title: 'Ant Design Title 1',
    6.   },
    7.   {
    8.     title: 'Ant Design Title 2',
    9.   },
    10.   {
    11.     title: 'Ant Design Title 3',
    12.   },
    13.   {
    14.     title: 'Ant Design Title 4',
    15.   },
    16. ];
    18. ReactDOM.render(
    19.   <List
    20.     itemLayout="horizontal"
    21.     dataSource={data}
    22.     renderItem={item => (
    23.       <List.Item>
    24.         <List.Item.Meta
    25.           avatar={<Avatar src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png" />}
    26.           title={<a href="https://ant.design">{item.title}</a>}
    27.           description="Ant Design, a design language for background applications, is refined by Ant UED Team"
    28.         />
    29.       </List.Item>
    30.     )}
    31.   />,
    32.   mountNode,
    33. );

    加载更多

    可通过 loadMore 属性实现加载更多功能。

    1. import { List, Avatar, Button, Skeleton } from 'antd';
    3. import reqwest from 'reqwest';
    5. const count = 3;
    6. const fakeDataUrl = `https://randomuser.me/api/?results=${count}&inc=name,gender,email,nat&noinfo`;
    8. class LoadMoreList extends React.Component {
    9.   state = {
    10.     initLoading: true,
    11.     loading: false,
    12.     data: [],
    13.     list: [],
    14.   };
    16.   componentDidMount() {
    17.     this.getData(res => {
    18.       this.setState({
    19.         initLoading: false,
    20.         data: res.results,
    21.         list: res.results,
    22.       });
    23.     });
    24.   }
    26.   getData = callback => {
    27.     reqwest({
    28.       url: fakeDataUrl,
    29.       type: 'json',
    30.       method: 'get',
    31.       contentType: 'application/json',
    32.       success: res => {
    33.         callback(res);
    34.       },
    35.     });
    36.   };
    38.   onLoadMore = () => {
    39.     this.setState({
    40.       loading: true,
    41.       list: this.state.data.concat([...new Array(count)].map(() => ({ loading: true, name: {} }))),
    42.     });
    43.     this.getData(res => {
    44.       const data = this.state.data.concat(res.results);
    45.       this.setState(
    46.         {
    47.           data,
    48.           list: data,
    49.           loading: false,
    50.         },
    51.         () => {
    52.           // Resetting window's offsetTop so as to display react-virtualized demo underfloor.
    53.           // In real scene, you can using public method of react-virtualized:
    54.           // https://stackoverflow.com/questions/46700726/how-to-use-public-method-updateposition-of-react-virtualized
    55.           window.dispatchEvent(new Event('resize'));
    56.         },
    57.       );
    58.     });
    59.   };
    61.   render() {
    62.     const { initLoading, loading, list } = this.state;
    63.     const loadMore =
    64.       !initLoading && !loading ? (
    65.         <div
    66.           style={{
    67.             textAlign: 'center',
    68.             marginTop: 12,
    69.             height: 32,
    70.             lineHeight: '32px',
    71.           }}
    72.         >
    73.           <Button onClick={this.onLoadMore}>loading more</Button>
    74.         </div>
    75.       ) : null;
    76.     return (
    77.       <List
    78.         className="demo-loadmore-list"
    79.         loading={initLoading}
    80.         itemLayout="horizontal"
    81.         loadMore={loadMore}
    82.         dataSource={list}
    83.         renderItem={item => (
    84.           <List.Item actions={[<a>edit</a>, <a>more</a>]}>
    86.               <List.Item.Meta
    87.                 avatar={
    88.                   <Avatar src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png" />
    89.                 }
    90.                 title={<a href="https://ant.design">{item.name.last}</a>}
    91.                 description="Ant Design, a design language for background applications, is refined by Ant UED Team"
    92.               />
    93.               <div>content</div>
    94.             </Skeleton>
    95.           </List.Item>
    96.         )}
    97.       />
    98.     );
    99.   }
    100. }
    102. ReactDOM.render(<LoadMoreList />, mountNode);

    通过设置 itemLayout 属性为 vertical 可实现竖排列表样式。

    1. import { List, Avatar, Icon } from 'antd';
    3. const listData = [];
    4. for (let i = 0; i < 23; i++) {
    5.   listData.push({
    6.     href: 'http://ant.design',
    7.     title: `ant design part ${i}`,
    8.     avatar: 'https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png',
    9.     description:
    10.       'Ant Design, a design language for background applications, is refined by Ant UED Team.',
    11.     content:
    12.       'We supply a series of design principles, practical patterns and high quality design resources (Sketch and Axure), to help people create their product prototypes beautifully and efficiently.',
    13.   });
    14. }
    16. const IconText = ({ type, text }) => (
    17.   <span>
    18.     <Icon type={type} style={{ marginRight: 8 }} />
    19.     {text}
    20.   </span>
    21. );
    23. ReactDOM.render(
    24.   <List
    25.     itemLayout="vertical"
    26.     size="large"
    27.     pagination={{
    28.       onChange: page => {
    29.         console.log(page);
    30.       },
    31.       pageSize: 3,
    32.     }}
    33.     dataSource={listData}
    34.     footer={
    35.       <div>
    36.         <b>ant design</b> footer part
    37.       </div>
    38.     }
    39.     renderItem={item => (
    40.       <List.Item
    41.         key={item.title}
    42.         actions={[
    43.           <IconText type="star-o" text="156" />,
    44.           <IconText type="like-o" text="156" />,
    45.           <IconText type="message" text="2" />,
    46.         ]}
    47.         extra={
    48.           <img
    49.             width={272}
    50.             alt="logo"
    51.             src="https://gw.alipayobjects.com/zos/rmsportal/mqaQswcyDLcXyDKnZfES.png"
    52.           />
    53.         }
    54.       >
    55.         <List.Item.Meta
    56.           avatar={<Avatar src={item.avatar} />}
    57.           title={<a href={item.href}>{item.title}</a>}
    58.           description={item.description}
    59.         />
    60.         {item.content}
    61.       </List.Item>
    62.     )}
    63.   />,
    64.   mountNode,
    65. );

    List 列表 - 图5

    栅格列表

    可以通过设置 List 的 grid 属性来实现栅格列表，column 可设置期望显示的列数。

    1. import { List, Card } from 'antd';
    3. const data = [
    4.   {
    5.     title: 'Title 1',
    6.   },
    7.   {
    8.     title: 'Title 2',
    9.   },
    10.   {
    11.     title: 'Title 3',
    12.   },
    13.   {
    14.     title: 'Title 4',
    15.   },
    16. ];
    18. ReactDOM.render(
    19.   <List
    20.     grid={{ gutter: 16, column: 4 }}
    21.     dataSource={data}
    22.     renderItem={item => (
    23.       <List.Item>
    24.         <Card title={item.title}>Card content</Card>
    25.     )}
    26.   />,
    27.   mountNode,
    28. );

    响应式的栅格列表。尺寸与 保持一致。

    List 列表 - 图7

    滚动加载

    结合 实现滚动自动加载列表。

    1. import { List, message, Avatar, Spin } from 'antd';
    2. import reqwest from 'reqwest';
    4. import InfiniteScroll from 'react-infinite-scroller';
    6. const fakeDataUrl = 'https://randomuser.me/api/?results=5&inc=name,gender,email,nat&noinfo';
    8. class InfiniteListExample extends React.Component {
    10.     data: [],
    11.     loading: false,
    12.     hasMore: true,
    13.   };
    15.   componentDidMount() {
    16.     this.fetchData(res => {
    17.       this.setState({
    18.         data: res.results,
    19.       });
    20.     });
    21.   }
    23.   fetchData = callback => {
    24.     reqwest({
    25.       url: fakeDataUrl,
    26.       type: 'json',
    27.       method: 'get',
    28.       contentType: 'application/json',
    29.       success: res => {
    30.         callback(res);
    31.       },
    32.     });
    33.   };
    35.   handleInfiniteOnLoad = () => {
    36.     let data = this.state.data;
    37.     this.setState({
    38.       loading: true,
    39.     });
    40.     if (data.length > 14) {
    41.       message.warning('Infinite List loaded all');
    42.       this.setState({
    43.         hasMore: false,
    44.         loading: false,
    45.       });
    46.       return;
    47.     }
    48.     this.fetchData(res => {
    49.       data = data.concat(res.results);
    50.       this.setState({
    51.         data,
    52.         loading: false,
    53.       });
    54.     });
    55.   };
    57.   render() {
    58.     return (
    59.       <div className="demo-infinite-container">
    60.         <InfiniteScroll
    61.           initialLoad={false}
    62.           pageStart={0}
    63.           loadMore={this.handleInfiniteOnLoad}
    64.           hasMore={!this.state.loading && this.state.hasMore}
    65.           useWindow={false}
    66.         >
    67.           <List
    68.             dataSource={this.state.data}
    69.             renderItem={item => (
    70.               <List.Item key={item.id}>
    71.                 <List.Item.Meta
    72.                   avatar={
    73.                     <Avatar src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png" />
    74.                   }
    75.                   title={<a href="https://ant.design">{item.name.last}</a>}
    76.                   description={item.email}
    77.                 />
    78.                 <div>Content</div>
    79.               </List.Item>
    80.             )}
    81.           >
    82.             {this.state.loading && this.state.hasMore && (
    83.               <div className="demo-loading-container">
    84.                 <Spin />
    85.               </div>
    86.             )}
    87.           </List>
    88.         </InfiniteScroll>
    89.       </div>
    90.     );
    91.   }
    92. }
    94. ReactDOM.render(<InfiniteListExample />, mountNode);
    1. .demo-infinite-container {
    2.   border: 1px solid #e8e8e8;
    3.   border-radius: 4px;
    4.   overflow: auto;
    5.   padding: 8px 24px;
    6.   height: 300px;
    7. }
    8. .demo-loading-container {
    9.   position: absolute;
    10.   bottom: 40px;
    11.   width: 100%;
    12.   text-align: center;
    13. }

    滚动加载无限长列表

    结合 实现滚动加载无限长列表，带有虚拟化（virtualization）功能，能够提高数据量大时候长列表的性能。

    virtualized 是在大数据列表中应用的一种技术，主要是为了减少不可见区域不必要的渲染从而提高性能，特别是数据量在成千上万条效果尤为明显。

    1. .demo-loading {
    2.   position: absolute;
    3.   bottom: -40px;
    4.   left: 50%;
    5. }

    分页的配置项。