小程序scroll-view自身下拉刷新的實現分享

前幾天分享了一個本身作的關於小程序組件擴展的開源項目（傳送門）

原本就是想給本身發佈的第一個開源代碼騙騙star，結果有很多善良的朋友給文章點讚了，搞得我有點很差意思，因此決定寫點乾貨講講具體是怎麼實現的。

其實也比較簡單，首先自定義組件下的 scroll-view 高度設爲比組件自己高出 40px，即頭部顯示刷新文字的區域高度，而後讓 scroll-view y軸偏移 -40px，這樣刷新文字區域就在頂部看不到了，具體css以下：

.scroll-view {
  height: calc(100% + 40px);
  transform: translateY(-40px);
}
複製代碼

而後就是監聽 scroll-view 的 onscroll 事件，這裏我將下拉刷新的狀態分爲五種：

//這段偷懶沒寫在代碼裏，直接用的數字
const _pullDownStatusDic =  {
  invisiable: 0,  //看不見
  pulling: 1,     //下拉時
  release: 2,     //可鬆開刷新時
  refresing: 3,   //正在刷新
  finish: 4,      //刷新完成
}
複製代碼

那麼在事件監聽中根據當前的 scrollTop 來判斷應該在哪種狀態：

//height就是預設的下拉至多少高度時刷新
if (scrollTop < -1 * height) {
  targetStatus = 2;
} else if (scrollTop < 0) {
  targetStatus = 1;
} else {
  targetStatus = 0;
}
複製代碼

問題來了，何時刷新呢？小程序的 scroll-view 並無 onscrollend 這種事件，因而我想到了 ontouchend，畢竟在手機上也只能用觸摸來滑動（點擊頭部返回頂部除外），因此只須要在 ontouchend 事件中監聽若是當前的下拉狀態是2（_pullDownStatusDic.release）即鬆開可刷新時，就觸發刷新：

if (status === 2) {
  this.setData({
    pullDownStatus: 3,
  })
  this.properties.refreshing = true,
  this.triggerEvent('pulldownrefresh');
}
複製代碼

固然這個時候還有個問題，咱們須要把刷新文字局域顯示出來，咱們是沒辦法吧一個 scroll-view 的 scrollTop 設爲負數的，因此只能將 scroll-view 的y軸偏移取消來解決（產生的問題就是鬆手時會有一下彈動，後期會想辦法進行優化）

完成刷新後，再將 scroll-view 的y軸偏移經過css動畫再變回 -40px（用 translate 而不用 margin 就是爲了此處動畫的流暢度），這樣就完成了一次下拉刷新。

是否是很簡單：）

另外還有一些小細節，還有加載更多，還有 xing-image 的一些實現，就更簡單了，有興趣的能夠看看源碼

最後再騙一波star：View on Github