前言
最近一個小程式專案中遇到一個需求，就是實現類似資訊類app的多頁面切換的那種效果, 如下圖:
最終效果：
1.功能分析
首先實現這個功能分為三步：
- 實現頂部menu選單
- 實現多頁面滑動切換
- 支援自定義下拉重新整理和上拉載入
2.實現分析:
頂部menu選單:
這個功能看實現效果，來決定難易程度，這裡po主已經寫過類似的元件，所以這塊直接完事。
多頁面滑動切換:
在微信小程式中這個效果還是比較容易實現的,直接上一個swiper就完事了。
上拉載入:
swpier裡面套用一個scroll-view，然後監聽scroll-view的bindscrolltolower 事件就好了。
下拉重新整理:
這裡著重介紹下拉載入，這裡po主前前後後換了三種方式實現方式。具體如下:
1.scroll-view 的onscroll 配合 touchend 去實現
這種方式實現起比較簡單。通過 scroll-view 的 onscroll 事件去判斷當前的 scrollTop 的負值來實現，最後 touchend 裡面根據當前scrollTop決定是否需要下拉重新整理，但是這種方式只能在ios上有效果，因為安卓的scroll-view沒有彈性滾動也就不會有scrollTop負值，而且ios上當頁面資料不足一頁時候，也會出現無法下拉的問題。遂棄用。
2. scroll-view 的touchstart，touchmove , touchend 去實現。
這種方式就是參考h5自定義下拉重新整理的方式去實現。這種實現方式的好處就是不會在安卓上不動了，也不會在ios沒資料的時候也滑不動了。但是，這裡不知道是po主寫的姿勢有問題還是咋回事，正常下拉時候沒問題，但是配合swiper左右切換的時候效果慘不忍睹。遂棄用。當然如果有高手是通過這種方式實現的並且配合swiper使用沒問題的請告訴我。
3. 還是scroll-view,這次po主在scroll-view 外面套了個movable-area。
因為之前用movable-area做側滑刪除的時候效果就很nice，所以最後想著這裡用來做下拉重新整理是不是也會比較好。經過實踐證明，確實是非常好。而且安卓ios都能正常下拉。在siwper切換時候，由於這裡用的movable-area也是原生元件所以相互影響就很小了，不像方法2裡面自定義手勢，不同方向去滾動效果就很慘烈。當然這裡說的是影響小，並不是沒有，不過在不是特別劇烈的操作下，效果基本是ok的。
3.程式碼實現
由於程式碼比較多，不好一一貼出來，所以直接上專案地址了(求star):