react + iscroll上拉加載下拉刷新分享

移動端上拉加載下拉刷新，是一個很常見的web需求，下面結合本身的學習分享一下心得。

引用iscroll庫

import iScroll from 'iscroll/build/iscroll-probe';只有這個庫能夠返回滾動時的滾動距離。

在react組件生命週期中，監聽scroll事件

在react組件生命週期中，componentDidMount裏監聽document的touchmove事件，禁止捕獲。否則用戶touchmove的時候，事件會被document捕獲，達不到咱們想要的效果。
fetchData請求數據，而且在請求數據完成後，當即初始化iscroll實例，並監聽iscroll實例的scroll和scrollEnd事件。

監聽兩個事件

在iscroll的scroll事件監聽函數裏，若是滾動距離this.iscrollInstance.y(減數) 與 最大距離this.iscrollInstance.maxScrollY (this.iscrollInstance.maxScrollY(負值) = this.wrapperHeight - this.scrollerHeight，被減數)之差大於設定的值scrollDistance，而且沒有數據正在加載時，更新組件狀態爲，‘鬆開加載數據。。。’；若是滾動距離this.iscrollInstance.y大於設定的值scrollDistance，而且沒有數據正在加載時，更新組件狀態爲，‘鬆開刷新數據...’。
在iscroll的scrollEnd事件監聽函數裏，fetchData請求數據，並更新state。
注意，由於在scroll事件和scrollEnd事件裏都更新了state（更新了文字提示'鬆開加載數據..'和‘數據正在加載中....’），因此在shouldComponentUpdate生命週期裏須要區分下dataList是否發生改變，以告訴componentDidUpdate是否從新渲染iscroll。只在fetchData成功，而且dataList發生變化才refresh iscroll實例。

上拉加載和下拉刷新文字提示的顯示

下拉刷新直接顯示在list-content的頭部便可。上拉加載的顯示有點問題，這個iscroll庫第一次渲染數據，滾動條不許確(不能一次顯示所有已加載的數據)，致使在list-content底部顯示的文字提示內容因爲沒有進入可視區不可見。
解決辦法是：

1. 給list-content設定最小高度爲第一屏加載內容的高度，這個前提是每一個list內容高度固定。
2. 若是list內容高度不固定，就再次加載數據，保證滾動條正常。這樣上拉加載的時候讓iscroll實例再往下滾動一個文字提示內容的高度，便可顯示底部的問題的文字提示。