前言
最近一個小程序項目中遇到一個需求，就是實現類似資訊類app的多頁面切換的那種效果, 如下圖:
最終效果：
效果體驗:
功能分析
首先實現這個功能分為三步：
- 實現頂部tab菜單
- 實現多頁面滑動切換
- 每個頁面支持自定義下拉刷新和上拉加載
實現分析
頂部tab菜單
這里的tab菜單支持橫向滑動，所以我們使用scroll-view，這樣可以通過scrollLeft來控制scroll-view的滾動。我們使用小程序 createSelectorQuery 方法來獲取所有tab的寬度，這樣就可以在點擊事件發生的時候確定滾動的距離。然后還需要計算每一個tab的padding，用於計算線條的滾動距離。然后還需要計算每個tab的子元素的寬度，以實現滾動過后線條寬度的變化。
多頁面滑動切換
在微信小程序中這個效果還是比較容易實現的,直接使用swiper就可以了。
上拉加載
swpier里面套用一個scroll-view，然后監聽scroll-view的bindscrolltolower 事件就可以實現上拉加載了。
下拉刷新
這里着重介紹下拉加載，首先小程序原生的下拉刷新在swiper上場的時候已經不好使了，因為swiper占全屏時會使原生的下拉刷新失效，所以這里需要自定義下拉刷新。這里po主前前后后換了三種方式實現方式。具體如下:
scroll-view 的onscroll 配合 touchend 去實現
這種方式實現起比較簡單。通過 scroll-view 的 onscroll 事件去判斷當前的 scrollTop 的負值來實現，最后 touchend 里面根據當前scrollTop決定是否需要下拉刷新，但是這種方式只能在ios上有效果，因為安卓的scroll-view沒有彈性滾動也就不會有scrollTop負值，而且ios上當頁面數據不足一頁時候，也會出現無法下拉的問題。遂棄用。
scroll-view 的touchstart，touchmove , touchend 去實現
這種方式就是參考h5自定義下拉刷新的方式去實現。這種實現方式的好處就是不會在安卓上不動了，也不會在ios沒數據的時候滑不動了。但是，這里不知道是po主寫的姿勢有問題還是咋回事，正常下拉時候沒問題，但是配合swiper左右切換的時候效果慘不忍睹。遂棄用。當然如果有高手是通過這種方式實現的並且配合swiper使用沒問題的請告訴我。
還是scroll-view,這次po主在scroll-view 外面套了個movable-area去實現
因為之前用movable-area做側滑刪除的時候效果就很nice，所以最后想着這里用來做下拉刷新是不是也會比較好。經過實踐證明，確實是非常好。而且安卓ios都能正常下拉。在siwper切換時候，由於這里用的movable-area也是原生組件所以相互影響就很小了，不像方法2里面自定義手勢，不同方向去滾動效果就很慘烈。當然這里說的是影響小，並不是沒有，不過在不是特別劇烈的操作下，效果基本是ok的(ps:2019-07-16日更新中, 修復了劇烈操作時候的閃動問題,現在的體驗更加絲滑了～～)。
整合組件(swipe-list)
到這里整個功能只差組合了。我們把上面寫的tab，scroll引入到需要使用的頁面，在scroll外面套個swiper，然后循環渲染分類列表來展示每一個swiper-item。這里我們需要手動監聽swiper的bindchange事件，以實現tab和swiper切換的聯動。由於這里實現關聯比較多，暫時沒有辦法把swipe-list抽離成一個單獨的組件。下面我直接貼上源代碼地址，大家可以自由使用和修改。