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