小程式元件-swipe多頁切換,並支援下拉重新整理,上拉載入,menu動態聯動切換

獨孤小鼬發表於2019-07-14

 

前言

  最近一個小程式專案中遇到一個需求,就是實現類似資訊類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):

 

  

 

 

相關文章