最近給別個公司做技術支援，要實現微信小程式上拉重新整理與下拉載入更多
微信給出的介面不怎麼友好，最終想實現效果類似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部分
|
1 2 3 |
view 下拉重新整理區域 slot 內容的slot區域 view 上拉載入更多區域 |
不過注意一點，slot一定要加高度，加高度。因為ios預設是反彈，滾動的，如果沒有內容，或者內容高度不足，沒撐開全部，那麼就會觸發預設滾動，頁面的導航條會上下移動
|
1 2 3 |
<view style="min-height:100%;"> <slot></slot> </view> |
結尾
由於自定義了導航條，引起了一堆的問題出來，說不上好與壞，反正遇到問題總是要想辦法解決的。
這裡簡單的記錄下，給初入小程式的當個借鑑吧。可能我也有處理不對的，或者有更好的方法，可以給下建議。
程式碼部分如果有需要，等有空了，我就分離出來發一份咯。