Skip to content

Commit 9ffd355

Browse files
committed
添加 readme
1 parent 301d3a5 commit 9ffd355

1 file changed

Lines changed: 84 additions & 0 deletions

File tree

README.md

Lines changed: 84 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,84 @@
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

Comments
 (0)