[JavaScript知识库]react-infinite-scroller组件滚动分页加载

?安装：

需要安装：cnpm i react-infinite-scroller react-custom-scrollbars -S

关键代码：

//滚动加载

import?InfiniteScroll?from?'react-infinite-scroller';

import?{Scrollbars}?from?'react-custom-scrollbars';

使用：

?<Scrollbars??style={{height:?"calc(100vh?-?80px)"}}?autoHide>

???????<InfiniteScroll
    
?????????????initialLoad={false}

?????????????pageStart={0}

?????????????loadMore={this.handleInfiniteOnLoad}

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

????????????useWindow={false}

????????>

??????????循环的数据渲染

?</InfiniteScroll>

?</Scrollbars>

再次请求的事件

?//滚动加载更多

????handleInfiniteOnLoad?=?()?=>?{}

部分代码展示

// 部分代码片段
//需要安装：cnpm i react-infinite-scroller react-custom-scrollbars -S

import InfiniteScroll from 'react-infinite-scroller';
import {Scrollbars} from 'react-custom-scrollbars';

//初始的state的状态
this.state = {
	loading: true,
	hasMore: true,
	pageNum: 1,
	pageSize: 20,
	total: 0,
	data: [],
};

// 获取下一页信息
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 ? <div className="end-text">所有数据已看完</div> : ""}
   </InfiniteScroll>
   {this.state.loading ? <div style={{position: 'relative', marginTop: 30}}><Loading/></div> : ""} // 滚动加载状态的loading状态
</Scrollbars>

演示具体代码：

//滚动加载
import InfiniteScroll from 'react-infinite-scroller';
import {Scrollbars} from 'react-custom-scrollbars';

export default class Home extends Component {
    constructor() {
        super()
        this.state = {
            list: [],//数据
            loading: false,
            hasMore: true,
        }
    }
    //https://3g.163.com/touch/reconstruct/article/list/'+type+'/0-10.html
    componentDidMount() {
        //跨域 安装 fetch-jsonp 
        fetchJsonp(baseurl + yaowen + '/0-10.html', {
            // jsonpCallback:'artiList',
            jsonpCallbackFunction: 'artiList'
        })
            .then(res => res.json())
            .then(res => {
                console.log(res);
                console.log(res[yaowen]);
                this.setState({
                    list: res[yaowen]
                })
            })
    }
    //滚动加载更多
    handleInfiniteOnLoad = () => {
        let { list } = this.state;
        this.setState({
          loading: true,
        });
        if (list.length > 10) {//假设大于10条数据后 请求无数据
          message.warning('没有更多数据了');//信息窗口
          this.setState({
            hasMore: false,
            loading: false,
          });
          return;
        }
        //请求接口
        fetchJsonp(baseurl + yaowen + '/0-20.html', {
            // jsonpCallback:'artiList',
            jsonpCallbackFunction: 'artiList'
        })
            .then(res => res.json())
            .then(res => {
                console.log(res);
                console.log(res[yaowen]);
                this.setState({
                    list: res[yaowen],
                    loading: false,
                })
            })
      };

    render() {
        return (
            //设置div元素的高度为当前窗口高度-100px
            <div>
                <h2>要闻</h2>
                <hr />
                <Scrollbars  style={{height: "calc(100vh - 80px)"}} autoHide>
                <InfiniteScroll
                    initialLoad={false}
                    pageStart={0}
                    loadMore={this.handleInfiniteOnLoad}
                    hasMore={!this.state.loading && this.state.hasMore}
                    useWindow={false}
                    >
                <List
                    itemLayout="horizontal"
                    dataSource={this.state.list}
                    renderItem={item => (
                        <List.Item>
                            <List.Item.Meta
                                avatar={<Image src={item.imgsrc} width={200} />}
                                title={<a href="##">{item.title}</a>}
                                description={item.source}
                            />
                            {/* {item.digest} */}
                        </List.Item>
                    )}
                />
                </InfiniteScroll>
                </Scrollbars>

                 <BackTop>返回顶部</BackTop>
            </div>
        )
    }
}