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

Love The Way You Lie 2022-09-12 09:52 220阅读 0赞

安装：

需要安装：**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>
            )
        }
    }