react-infinite-scroller组件滚动分页加载

getMore = () => {//获取数据的 随意写

if (this.state.total === this.state.data.length) {

return;

}

this.setState({

loading: true,

pageNum: this.state.pageNum + 1

}, () => {

this.initData(); //请求数据接口

});

}

//组件调用

<Scrollbars id=‘list-scrollbars’ style={ {height: “calc(100vh - 100px)”}} autoHide >

<InfiniteScroll

className=“list-contents”

initialLoad={false}

pageStart={0}

loadMore={this.getMore.bind(this)}

hasMore={!this.state.loading && this.state.hasMore}

useWindow={false}

{this.renderItemList(data)} // Tip:内部元素不要加高度以及overflow:auto等属性！！！！

{total === data.length && data.length > 4 ?

所有数据已看完

: “”}

{this.state.loading ? <div style={ {position: ‘relative’, marginTop: 30}}> : “”} // 滚动加载状态的loading状态

演示具体代码：

//滚动加载

import InfiniteScroll from ‘react-infinite-scroller’;

import {Scrollbars} from ‘react-custom-scrollbars’;

export default class Home extends Component {

constructor() {