微信小程序-Swiper和下拉刷新組件

前言

最近一個小程序項目中遇到一個需求，就是實現相似資訊類app的多頁面切換的那種效果, 以下圖:

最終效果：

效果體驗:

功能分析

首先實現這個功能分爲三步：

• 實現頂部tab菜單
• 實現多頁面滑動切換
• 每一個頁面支持自定義下拉刷新和上拉加載

 

實現分析

頂部tab菜單

這裏的tab菜單支持橫向滑動，因此咱們使用scroll-view，這樣能夠經過scrollLeft來控制scroll-view的滾動。咱們使用小程序 createSelectorQuery 方法來獲取全部tab的寬度，這樣就能夠在點擊事件發生的時候肯定滾動的距離。而後還須要計算每個tab的padding，用於計算線條的滾動距離。而後還須要計算每一個tab的子元素的寬度，以實現滾動事後線條寬度的變化。

• 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抽離成一個單獨的組件。下面我直接貼上源代碼地址，你們能夠自由使用和修改。

• swipe-list源代碼