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

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

微信給出的接口不怎麼友好，最終想實現效果相似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>

　　

結尾：

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

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

代碼部分若是有須要，等有空了，我就分離出來發一份咯。