react 下拉刷新上拉加載更多通用組件

時間 2019-12-05

標籤 react 下拉刷新加載更多通用組件欄目 React 简体版

原文原文鏈接

react-pullLoad

React 版本的 pullLoad 下拉更新上拉加載更多組件css

pullLoad 非 react 版本，支持 require.js 模塊化調用html

示例

demo1 document.body 做爲容器react

demo2 ReactPullLoad 根節點 DOM 做爲容器git

demo3 document.body 做爲容器且自定義刷新和加載更多 UI 組件github

當前版本 1.0.0

簡介

只依賴 react/react-domnpm
樣式使用 less 編寫less
支持 body 或者組件根 DOM 固定高度做爲外部容器 contianer（便可視區域大小）dom
觸摸事件綁定在內容塊 content（即高度爲 auto 的DOM ）模塊化
純 React 組件方式開發的ui
支持自定義刷新和加載更多 UI 組件
支持代碼動態調起刷新和加載更多（組件將展現刷新和加載更多樣式）
只支持移動觸摸設備

功能點

下拉距離大於閾值觸發刷新動做
滾動到距底部距離小於閾值加載更多
支持自定義刷新和加載更多 UI 組件

使用說明

npm install --save react-pullload

import ReactPullLoad,{ STATS } from 'react-pullload'

export class App extends Component{
  constructor(){
    super();
    this.state ={
      hasMore: true,
      data: cData,
      action: STATS.init,
      index: loadMoreLimitNum //loading more test time limit
    }
  }

  handleAction = (action) => {
    console.info(action, this.state.action,action === this.state.action);
    //new action must do not equel to old action
    if(action === this.state.action){
      return false
    }

    if(action === STATS.refreshing){//刷新
      this.handRefreshing();
    } else if(action === STATS.loading){//加載更多
      this.handLoadMore();
    } else{
      //DO NOT modify below code
      this.setState({
        action: action
      })
    }
  }

  handRefreshing = () =>{
    if(STATS.refreshing === this.state.action){
      return false
    }

    setTimeout(()=>{
      //refreshing complete
      this.setState({
        data: cData,
        hasMore: true,
        action: STATS.refreshed,
        index: loadMoreLimitNum
      });
    }, 3000)

    this.setState({
      action: STATS.refreshing
    })
  }

  handLoadMore = () => {
    if(STATS.loading === this.state.action){
      return false
    }

    setTimeout(()=>{
      if(this.state.index === 0){
        this.setState({
          action: STATS.reset,
          hasMore: false
        });
      } else{
        this.setState({
          data: [...this.state.data, cData[0], cData[0]],
          action: STATS.reset,
          index: this.state.index - 1
        });
      }
    }, 3000)

    this.setState({
      action: STATS.loading
    })
  }
  
  render(){
    const {
      data, 
      hasMore
    } = this.state

    const fixHeaderStyle = {
      position: "fixed",
      width: "100%",
      height: "50px",
      color: "#fff",
      lineHeight: "50px",
      backgroundColor: "#e24f37",
      left: 0,
      top: 0,
      textAlign: "center",
      zIndex: 1
    }

    return (
      <div>
        <div style={fixHeaderStyle}>
          fixed header    
        </div>
        <ReactPullLoad 
          downEnough={150}
          action={this.state.action}
          handleAction={this.handleAction}
          hasMore={hasMore}
          style={{paddingTop: 50}}
          distanceBottom={1000}>
          <ul className="test-ul">
            <button onClick={this.handRefreshing}>refreshing</button>
            <button onClick={this.handLoadMore}>loading more</button>
            {
              data.map( (str, index )=>{
                return <li key={index}><img src={str} alt=""/></li>
              })
            }
          </ul>
        </ReactPullLoad>
      </div>
    )
  }
}

參數說明：

參數	說明	類型	默認值	備註
action	用於同步狀態	string		isRequired
handleAction	用於處理狀態	func		isRequired
hasMore	是否還有更多內容可加載	bool	false	在 onLoadMore 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	加載中