React.js中實現下拉重新整理

大灰狼的小綿羊哥哥發表於2017-03-20
ReactJS
摘要: react-pull-to-refresh: react.js中實現下拉重新整理
https://my.oschina.net/wolfx/blog/707183

最近才發現的外掛, 感覺不錯

安裝

npm install react-pull-to-refresh

使用

handleRefresh(resolve, reject) {
  // do some async code here
  if (success) {
    resolve();
  } else {
    reject();
  }
}

<ReactPullToRefresh
  onRefresh={this.handleRefresh}
  className="your-own-class-if-you-want"
  style={{
    textAlign: 'center'
  }}>
  <h3>Pull down to refresh</h3>
  <div>{items}</div>
  <div>etc.</div>
</ReactPullToRefresh>

github

https://github.com/bryaneaton13/react-pull-to-refresh



基於 iscroll 實現的 react 元件

第一步：引入外掛

npm install reactjs-iscroll --save 可在專案下的package.json檔案內dependencies下看到安裝好的外掛版本；

第二步：在專案中使用

import iScroll from 'iscroll/build/iscroll-probe'; 表示引入scroll庫，可支援onscroll。

import ReactIScroll from 'reactjs-iscroll';

第三步：引數說明

引數說明，利用 react props 傳入

  • options: PropTypes.object.isRequired, 例項化 iScroll 選項
  • iScroll: PropTypes.func.isRequired, iScroll 元件類
  • className: PropTypes.string, 自定義 class 樣式，可傳入自定義 class 樣式
  • style: PropTypes.string, 自定義 style 樣式，可傳入自定義 style 樣式
  • children: PropTypes.node, iScroll 元件中展示的內容
  • pullDown: PropTypes.bool, 是否顯示向下拉動載入 banner
  • pullUp: PropTypes.bool, 是否顯示向上載入更多 footer
  • pullDownText: PropTypes.array, 向下載入對應的文字，陣列中有三個值，分別對應初始化值，向下拉動顯示文字，載入中顯示文字
  • pullUpText: PropTypes.array, 向上載入對應的文字，陣列中有三個值，分別對應初始化值，向上拉動顯示文字，載入中顯示文字
  • pullDownThreshold: PropTypes.number, 向下拉動載入資料臨界值，也就是向下滑動多長時，鬆開時載入資料
  • pullUpThreshold: PropTypes.number, 向上拉動載入資料臨界值，也就是向上滑動多長時，鬆開時載入資料
  • handleRefresh: PropTypes.func
    • 重新整理後回撥函式，定義要處理的邏輯，比如載入更多和重新整理。
    • 該函式有兩個引數 handleRefresh(downOrUp, callback)
    • 引數 downOrUp 等於 'up' 表示向上滑動；等於 'down' 表示向下滑動，我們根據這個引數值來處理向上拉動還是向下拉動的邏輯， 一般向上是載入更多，向下是重新整理頁面。
    • 引數 callback 是元件中提供的回撥函式，我們呼叫 fetch 或 ajax 載入完資料時呼叫該回撥函式，讓滑動狀態恢復到最初狀態 該引數的使用可以參考例子 http://localhost:9090/paging.html

相關文章