基於 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 載入完資料時呼叫該回調函式，讓滑動狀態恢復到最初狀態