最近給別個公司做技術支援，要實現微信小程式上拉重新整理與下拉載入更多

微信給出的介面不怎麼友好，最終想實現效果類似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部分

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

結尾

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

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

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