mirror of
https://github.com/ant-design/ant-design.git
synced 2024-12-06 02:15:35 +08:00
73 lines
1.7 KiB
Markdown
73 lines
1.7 KiB
Markdown
---
|
|
order: 7
|
|
title:
|
|
zh-CN: 滚动加载无限长列表
|
|
en-US: virtual list
|
|
---
|
|
|
|
## zh-CN
|
|
|
|
结合 [rc-virtual-list](https://github.com/react-component/virtual-list) 实现滚动加载无限长列表,能够提高数据量大时候长列表的性能。
|
|
|
|
## en-US
|
|
|
|
An example of infinite & virtualized list via using [rc-virtual-list](https://github.com/react-component/virtual-list).
|
|
|
|
```jsx
|
|
import React, { useState, useEffect } from 'react';
|
|
import { List, message, Avatar } from 'antd';
|
|
import VirtualList from 'rc-virtual-list';
|
|
|
|
const fakeDataUrl =
|
|
'https://randomuser.me/api/?results=20&inc=name,gender,email,nat,picture&noinfo';
|
|
const ContainerHeight = 400;
|
|
|
|
const VirtualizedExample = () => {
|
|
const [data, setData] = useState([]);
|
|
|
|
const appendData = () => {
|
|
fetch(fakeDataUrl)
|
|
.then(res => res.json())
|
|
.then(body => {
|
|
setData(data.concat(body.results));
|
|
message.success(`${body.results.length} more items loaded!`);
|
|
});
|
|
};
|
|
|
|
useEffect(() => {
|
|
appendData();
|
|
}, []);
|
|
|
|
const onScroll = e => {
|
|
if (e.target.scrollHeight - e.target.scrollTop === ContainerHeight) {
|
|
appendData();
|
|
}
|
|
};
|
|
|
|
return (
|
|
<List>
|
|
<VirtualList
|
|
data={data}
|
|
height={ContainerHeight}
|
|
itemHeight={47}
|
|
itemKey="email"
|
|
onScroll={onScroll}
|
|
>
|
|
{item => (
|
|
<List.Item key={item.email}>
|
|
<List.Item.Meta
|
|
avatar={<Avatar src={item.picture.large} />}
|
|
title={<a href="https://ant.design">{item.name.last}</a>}
|
|
description={item.email}
|
|
/>
|
|
<div>Content</div>
|
|
</List.Item>
|
|
)}
|
|
</VirtualList>
|
|
</List>
|
|
);
|
|
};
|
|
|
|
ReactDOM.render(<VirtualizedExample />, mountNode);
|
|
```
|