React 有限无限加载组件

试用了 github 上一些无限滚动加载组件，但对总是无限加载这一点并不满意，因为凡事有个度，也许用户只是想看看页脚，因此花了点时间做了个有限无限加载组件，提交到了 npm

npm

Github

Demo

Limited Infinite Scroll

React 无限滚动加载组件，加载一定分页后改为手动加载器(因为有些用户不喜欢永远无限加载，可能他们只是想看 Footer)

安装

npm install react-limited-infinite-scroll --save-dev

使用

import LimitedInfiniteScroll from 'react-limited-infinite-scroll'

const { total, list } = this.props.data

const items = list.map((item, index) => {
    return (
        <div key={index}>
            <div>item content</div>
        </div>
    )
})

<LimitedInfiniteScroll 
    limit={5} 
    hasMore={total === undefined || items.length < total}
    spinLoader={<div className="loader">Loading...</div>}
    mannualLoader={<span style={{fontSize: 20, lineHeight: 1.5, marginTop: 20, marginBottom: 20, display: 'inline-block'}}>Load More</span>}
    noMore={<div className="loader">No More Items</div>} 
    loadNext={this.loadNextFunc}>
    {items}
</LimitedInfiniteScroll>

Props

查看github格式化的介绍 Github

其它

使用 React 15.4+的用户，由于 PropTypes 已经从 React 主库分离，请安装 2.x.x 版本

npm install react-limited-infinite-scroll --save-dev

而使用较老版本 React 的用户，安装 1.x.x 版本

npm install react-limited-infinite-scroll@^1.0.0 --save-dev