小程式scroll-view自身下拉重新整理的實現分享

Anho發表於2018-03-19
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

相關文章