其他分享
首页 > 其他分享> > react 下拉刷新上拉加载更多通用组件

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

作者：互联网

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

于 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

标签：reset,STATS,react,组件,state,上拉,action,加载
来源： https://www.cnblogs.com/sexintercourse/p/15916033.html