最近給別個公司做技術支持，要實現微信小程序上拉刷新與下拉加載更多

微信給出的接口不怎麽友好，最終想實現效果類似QQ手機版 ，一共3種下拉刷新狀態變化，文字+圖片+背景顏色

最終實現後的效果(這裏提示有個不同點就是，自定義了導航條，並且下拉的時候，自定義導航條必須固定）

小程序實現下拉加載2種方式：

1. 簡單粗暴，直接開啟enablePullDownRefresh，開啟全局下拉刷新

2.利用scroll-view組件

簡單分析下2種方式的利與弊

enablePullDownRefresh方式

• 優點：簡單粗暴，兼容性沒問題
• 缺點1: 只能配置背景顏色，沒有圖片與狀態提示的變化。
• 缺點2: 最重要的一點，如果自定義了導航條即使采用fixed定位，整個導航條還是會隨頁面一起往下拉動，整個布局效果非常變扭。這才是我放棄的最終原因（參考最終效果圖，自定義了導航條）

scroll-view方式

• 優點：可以自定義(參考最終效果圖)
• 缺點：安卓與微信存在不同的兼容問題，所以針對2套平臺要有2套處理方式，比較麻煩

實現原理：

enablePullDownRefresh的方式沒啥好說的，按照文檔的來。

scroll-view方式的就比較麻煩了，首先說下引起問題的2個因素點

• 自定義了導航條
• IOS上有橡皮筋效果，安卓沒有

自定義了導航條，那麽頁面的布局一定要減去這個導航條的占位，所以scroll-view包裹的區域，一定會有一個定位處理，top的定位距離就是導航條的高度。

IOS上scroll-view的實現原理

IOS默認存在橡皮筋效果那麽意味著就會有反彈反饋，元素滾動一定會有scrollTop的變化，那麽利用scrollTop的變化就能很好的實現

為了滾動的性能最大優化，所以默認都是用系統自帶滾動，並不會做控制頁面內容本身的滑動

布局的時候，原來的滾動內容部分用scroll-view包裝，並且在之前加上下拉刷新的展示區域view，利用translateY把scroll-view的top設置為負值(展示區域的高度)，這樣就把下拉的顯示區域拼接到了scroll-view之前，並且還看不到

在下拉scroll-view的時候，由於ios支持橡皮筋效果，所以scrollTop為負值的時候，展示區域自動會隨著scrollTop的遞減而出現。

狀態的與圖片的變化，可以通過監聽scroll事件，通過scrollTop值的變化，做出相應的改變。當然這裏還會有scrolltolower與touchend事件，要知道什麽時候松手後觸發刷新，並且刷新之後還要設置還原

安卓上scroll-view的實現原理

安卓就這樣，沒有反彈效果，所以scrollTop也不會有負數。這時候只能靠手動移動頁面模擬反彈了。

安卓上需要對scroll-view綁定 start，move，end，scroll，upper事件，要監聽用戶的頁面操作，當然如果是正常滾動內容的時候，不影響，也不做任何處理，一旦用戶是下拉刷新操作，才介入

頁面的布局也是由下拉刷新的展示區域+包裹內容的scroll-view區域組成，不同於ios布局的就是，下拉刷新區域默認高度是0，scroll-view也不需要設置translateY負值了，需要下拉的時候調整展示區域的高度

通過lower事件判斷是邊界，如果下拉越界，那麽通過move控制scroll-view區域整體的往下滑動同時控制下拉刷新區域的高度變化，這樣就實現了下拉的效果

最後在end中，判斷下移動的距離跟刷新的高度對比，從而更改下拉的狀態與圖片，並且觸發刷新請求，最後可以動畫復位

封裝

一般這種功能直接做成組件就好了，ios與安卓可以獨立2個組件，然後註冊到一個中介的組件中，判斷調用哪個，這樣比較好維護。

組件內部可以分成3部分

view 下拉刷新區域
slot 內容的slot區域
view 上拉加載更多區域

不過註意一點，slot一定要加高度，加高度。因為ios默認是反彈，滾動的，如果沒有內容，或者內容高度不足，沒撐開全部，那麽就會觸發默認滾動，頁面的導航條會上下移動

<view style="min-height:100%;">
  <slot></slot>
</view>

結尾：

由於自定義了導航條，引起了一堆的問題出來，說不上好與壞，反正遇到問題總是要想辦法解決的。

這裏簡單的記錄下，給初入小程序的當個借鑒吧。可能我也有處理不對的，或者有更好的方法，可以給下建議。

代碼部分如果有需要，等有空了，我就分離出來發一份咯。

微信小程序-自定義QQ版下拉刷新