react 下拉刷新上拉加载更多通用组件

Mathilda91于 2017-03-17 00:01:53 发布1321 收藏 4 文章标签： javascript ui 版权

react-pullLoad

React 版本的 pullLoad 下拉更新 上拉加载更多 组件

pullLoad 非 react 版本，支持 require.js 模块化调用

示例

demo1 document.body 作为容器

demo2 ReactPullLoad 根节点 DOM 作为容器

demo3 document.body 作为容器 且自定义刷新和加载更多 UI 组件

当前版本 1.0.0

简介

1. 只依赖 react/react-dom

2. 样式使用 less 编写

3. 支持 body 或者组件根 DOM 固定高度作为外部容器 contianer（即可视区域大小）

4. 触摸事件绑定在内容块 content（即高度为 auto 的DOM ）

5. 纯 React 组件方式开发的

6. 支持自定义刷新和加载更多 UI 组件

7. 支持代码动态调起刷新和加载更多（组件将展示刷新和加载更多样式）

8. 只支持移动触摸设备

功能点

1. 下拉距离大于阈值触发刷新动作

2. 滚动到距底部距离小于阈值加载更多

3. 支持自定义刷新和加载更多 UI 组件

使用说明

npm install --save react-pullload

1.   import ReactPullLoad,{ STATS } from 'react-pullload'
2.    
3.   export class App extends Component{
4.   constructor(){
5.   super();
6.   this.state ={
7.   hasMore: true,
8.   data: cData,
9.   action: STATS.init,
10.   index: loadMoreLimitNum //loading more test time limit
11.   }
12.   }
13.    
14.   handleAction = (action) => {
15.   console.info(action, this.state.action,action === this.state.action);
16.   //new action must do not equel to old action
17.   if(action === this.state.action){
18.   return false
19.   }
20.    
21.   if(action === STATS.refreshing){//刷新
22.   this.handRefreshing();
23.   } else if(action === STATS.loading){//加载更多
24.   this.handLoadMore();
25.   } else{
26.   //DO NOT modify below code
27.   this.setState({
28.   action: action
29.   })
30.   }
31.   }
32.    
33.   handRefreshing = () =>{
34.   if(STATS.refreshing === this.state.action){
35.   return false
36.   }
37.    
38.   setTimeout(()=>{
39.   //refreshing complete
40.   this.setState({
41.   data: cData,
42.   hasMore: true,
43.   action: STATS.refreshed,
44.   index: loadMoreLimitNum
45.   });
46.   }, 3000)
47.    
48.   this.setState({
49.   action: STATS.refreshing
50.   })
51.   }
52.    
53.   handLoadMore = () => {
54.   if(STATS.loading === this.state.action){
55.   return false
56.   }
57.    
58.   setTimeout(()=>{
59.   if(this.state.index === 0){
60.   this.setState({
61.   action: STATS.reset,
62.   hasMore: false
63.   });
64.   } else{
65.   this.setState({
66.   data: [...this.state.data, cData[0], cData[0]],
67.   action: STATS.reset,
68.   index: this.state.index - 1
69.   });
70.   }
71.   }, 3000)
72.    
73.   this.setState({
74.   action: STATS.loading
75.   })
76.   }
77.    
78.   render(){
79.   const {
80.   data,
81.   hasMore
82.   } = this.state
83.    
84.   const fixHeaderStyle = {
85.   position: "fixed",
86.   width: "100%",
87.   height: "50px",
88.   color: "#fff",
89.   lineHeight: "50px",
90.   backgroundColor: "#e24f37",
91.   left: 0,
92.   top: 0,
93.   textAlign: "center",
94.   zIndex: 1
95.   }
96.    
97.   return (
98.   <div>
99.   <div style={fixHeaderStyle}>
100.   fixed header
101.   </div>
102.   <ReactPullLoad
103.   downEnough={150}
104.   action={this.state.action}
105.   handleAction={this.handleAction}
106.   hasMore={hasMore}
107.   style={{paddingTop: 50}}
108.   distanceBottom={1000}>
109.   <ul className="test-ul">
110.   <button onClick={this.handRefreshing}>refreshing</button>
111.   <button onClick={this.handLoadMore}>loading more</button>
112.   {
113.   data.map( (str, index )=>{
114.   return <li key={index}><img src={str} alt=""/></li>
115.   })
116.   }
117.   </ul>
118.   </ReactPullLoad>
119.   </div>
120.   )
121.   }
122.   }

参数说明：

参数	说明	类型	默认值	备注
action	用于同步状态	string		isRequired
handleAction	用于处理状态	func		isRequired
hasMore	是否还有更多内容可加载	bool	false	在 onl oadMore reject() 之后设置
downEnough	下拉距离是否满足要求	num	100
distanceBottom	距离底部距离触发加载更多	num	100
isBlockContainer	是否开启使用组件根 DOM 作为外部容器 contianer	bool	false
HeadNode	自定义顶部刷新 UI 组件	any	ReactPullLoad HeadNode	必须是一个 React 组件
FooterNode	自定义底部加载更多 UI 组件	any	ReactPullLoad FooterNode	必须是一个 React 组件

另外 ReactPullLoad 组件支持根属性扩展 例如： classNamestyle 等等

STATS list

属性	值	根节点 className	说明
init	''		组件初始状态
pulling	'pulling'	state-pulling	下拉状态
enough	'pulling enough'	state-pulling.enough	下拉并且已经满足阈值
refreshing	'refreshing'	state-refreshing	刷新中（加载数据中）
refreshed	'refreshed'	state-refreshed	完成刷新动作
reset	'reset'	state-reset	恢复默认状态
loading	'loading'	state-loading	加载中

init/reset -> pulling -> enough -> refreshing -> refreshed -> reset

init/reset -> pulling -> reset

init/reset -> loading -> reset

自定义刷新及加载组件

请参考默认刷新及加载组件源码（通过 css 根节点不同 className 设置对应 UI 样式来实现）

ReactPullLoad HeadNode

ReactPullLoad FooterNode

或参考 demo3 中的实现方式在组件内容通过获取的 loaderState 与 STATS 不同状态对比来现实

demo3

License

MIT