|
| 1 | +# [react-pullLoad](https://github.com/react-ld/react-pullLoad) |
| 2 | + React 版本的 [pullLoad](https://github.com/lidianhao123/pullLoad) 下拉更新 上拉加载更多 组件 |
| 3 | + |
| 4 | + [pullLoad](https://github.com/lidianhao123/pullLoad) 非 react 版本,支持 require.js 模块化调用 |
| 5 | + |
| 6 | +#### 示例 |
| 7 | +http://lidianhao123.github.io/pullLoad/ |
| 8 | + |
| 9 | +# 简介 |
| 10 | +1. 只依赖 react/react-dom |
| 11 | +2. 样式使用 less 编写 |
| 12 | +3. 支持 body 或者组件根 DOM 固定高度作为外部容器 contianer(即可视区域大小) |
| 13 | +4. 触摸事件绑定在内容块 content(即高度为 auto 的DOM ) |
| 14 | + |
| 15 | +# 功能点 |
| 16 | +1. 下拉距离大于阈值刷新 |
| 17 | +2. 滚动到距底部距离小于阈值加载更多 |
| 18 | + |
| 19 | +# 使用说明 |
| 20 | + |
| 21 | +```sh |
| 22 | +npm install --save react-pullload |
| 23 | +``` |
| 24 | + |
| 25 | +```js |
| 26 | +export class App extends Component{ |
| 27 | + constructor(){ |
| 28 | + super(); |
| 29 | + this.refreshResolve = null //用于保存刷新或者加载更多的resolve函数 |
| 30 | + this.loadMore = this.loadMore.bind(this); |
| 31 | + this.refresh = this.refresh.bind(this); |
| 32 | + this.state ={ |
| 33 | + hasMore: true, |
| 34 | + data: cData |
| 35 | + } |
| 36 | + } |
| 37 | + //刷新 |
| 38 | + refresh(resolve, reject) { |
| 39 | + setTimeout(()=>{ |
| 40 | + this.setState({ |
| 41 | + data: cData |
| 42 | + }); |
| 43 | + resolve(); |
| 44 | + },3000) |
| 45 | + } |
| 46 | + //加载更多 |
| 47 | + loadMore(resolve){ |
| 48 | + setTimeout(()=>{ |
| 49 | + this.setState({ |
| 50 | + data: [...this.state.data, cData[0], cData[0]] |
| 51 | + }); |
| 52 | + resolve(); |
| 53 | + },3000) |
| 54 | + } |
| 55 | + render(){ |
| 56 | + const {data, hasMore} = this.state |
| 57 | + return ( |
| 58 | + <div> |
| 59 | + <ReactPullLoad downEnough={150} onRefresh={this.refresh.bind(this)} onLoadMore={this.loadMore.bind(this)} hasMore={hasMore}> |
| 60 | + <ul className="test-ul"> |
| 61 | + { |
| 62 | + data.map( (str, index )=>{ |
| 63 | + return <li key={index}><img src={str} alt=""/></li> |
| 64 | + }) |
| 65 | + } |
| 66 | + </ul> |
| 67 | + </ReactPullLoad> |
| 68 | + </div> |
| 69 | + ) |
| 70 | + } |
| 71 | +} |
| 72 | +``` |
| 73 | + |
| 74 | +# 参数说明: |
| 75 | +| 参数 | 说明 | 默认值 | 备注 | |
| 76 | +| --- | --- | --- | --- | |
| 77 | +| onRefresh | 刷新动作的业务逻辑回调函数 | function(resolve, reject){} | 刷新结束执行 resolve(), 出现异常 reject() | |
| 78 | +| onLoadMore | 加载更多动作的业务逻辑回调函数 | function(resolve, reject){} | 刷新结束执行 resolve(), 出现异常 reject() | |
| 79 | +| hasMore | 是否还有更多内容可加载 | false | 在 onLoadMore reject() 之后设置 | |
| 80 | +| downEnough | 下拉距离是否满足要求 | 100 | | |
| 81 | +| distanceBottom | 距离底部距离触发加载更多 | 100 | | |
| 82 | +| isBlockContainer | 是否开启使用组件根 DOM 作为外部容器 contianer | false | | |
| 83 | + |
| 84 | +另外 ReactPullLoad 组件支持 |
0 commit comments