--- order: 2 title: zh-CN: 加载更多 en-US: Load more --- ## zh-CN 可通过 `loadMore` 属性实现加载更多功能。 ## en-US Load more list with `loadMore` property. ```jsx import { List, Avatar, Button, Skeleton } from 'antd'; import reqwest from 'reqwest'; const count = 3; const fakeDataUrl = `https://randomuser.me/api/?results=${count}&inc=name,gender,email,nat&noinfo`; class LoadMoreList extends React.Component { state = { initLoading: true, loading: false, data: [], list: [], }; componentDidMount() { this.getData(res => { this.setState({ initLoading: false, data: res.results, list: res.results, }); }); } getData = callback => { reqwest({ url: fakeDataUrl, type: 'json', method: 'get', contentType: 'application/json', success: res => { callback(res); }, }); }; onLoadMore = () => { this.setState({ loading: true, list: this.state.data.concat([...new Array(count)].map(() => ({ loading: true, name: {} }))), }); this.getData(res => { const data = this.state.data.concat(res.results); this.setState( { data, list: data, loading: false, }, () => { // Resetting window's offsetTop so as to display react-virtualized demo underfloor. // In real scene, you can using public method of react-virtualized: // https://stackoverflow.com/questions/46700726/how-to-use-public-method-updateposition-of-react-virtualized window.dispatchEvent(new Event('resize')); }, ); }); }; render() { const { initLoading, loading, list } = this.state; const loadMore = !initLoading && !loading ? (