微信小程式中多tab的解決辦法

技術概述

在評論列表中會分成“二手交易”和“任務委託”兩個模組，每個模組中有擁有“全部”“好評”和“差評三個”標籤頁，因此需要多tab巢狀結構。而官方文件中對於多tab巢狀並沒有講述，在實踐中bug還是蠻多的。

技術詳述

有兩種方法實現多tab頁面。

第一種是使用vant weapp中的tab元件，首先在app.json或index.json中引入元件。

"usingComponents": {
  "van-tab": "@vant/weapp/tab/index",
  "van-tabs": "@vant/weapp/tabs/index"
}

第二步在中定義二手交易和任務委託兩個，在每一個中再定義一個，其中包含了全部、好評和差評三個。程式碼結構如下：

第二種方式是直接使用官方的，先把第一層swiper框架搭好，需要能通過滑動和點選切換頁面，然後在第一層的中嵌入第二層的，方法照舊。程式碼框架如下：

問題和解決過程

在使用第一種方法時有遇到很多問題，有些問題已經解決了，並且將在下面給出解決方法，而有些問題暫時無法解決。問題一：二手交易和任務委託在點選切換的時候，下方的小橫條動畫會卡在最左邊。如下圖所示。

其原因是Tabs 元件在掛載時，會獲取自身的寬度，並計算出底部條的位置。如果元件一開始處於隱藏狀態，則獲取到的寬度永遠為 0，因此無法展示底部條位置。因此我在每次點選不同的tab切換時，給tab添加了resize()方法重新獲取自身寬度。

onClick(e) {
    this.selectComponent('#tabs').resize();
  },

新增完這段程式碼之後效果如下圖所示：

問題二：例如先點選了二手交易下的好評模組，之後切換至任務委託瀏覽，瀏覽完返回二手交易模組，內容展示的還是其中的好評模組，而無法預設顯示“全部”模組。這個也是一個小問題，目前的思路同樣是給第一層的tab新增點選事件，當tab被點選之後顯示其中的第一個“全部”模組。當然我認為使用者返回之前的模組就是想瀏覽之前還沒瀏覽完的評價，因此這個bug好像也無關緊要。

使用元件庫的好處是其中的滑動切換頁面還有滑動動畫都做得比較好，但是當我們使用微信自帶的swiper，這些實現就比較複雜。但是也可以實現左右滑動切換，而且可以實現第二層的滑到盡頭時第一層的能隨之改變。實現思路是通過繫結swiper元件的回撥方法bindtransition獲取swiper-item的位移資料，但是回撥的資料並沒有swiper-item的下標，所以無法判定當前滑動的swiper-item是否在邊緣，所以只能在邊緣的swiper-item容器內加一個充滿容器的view，並且繫結touch的相關方法，在方法內設定是否越級翻頁的flag為true，當然這個flag在js中預設定義為false，有了這個flag再加上bindtransition的回撥偏移量就能夠實現越級翻頁了。實現程式碼如下：

swiperTrans: function(e) {
    var that = this;
    var dx = e.detail.dx
    
    if (this.data.flag3 && (this.data.flag2) && (dx >= 50) && (dx < 100)) {
      console.log('debug')
      that.data.flag3 = false
      this.setData({
        currentTab: that.data.swipeIndex + 1,
        
      })
    }
    if (this.data.flag3 && (this.data.flag1) && (dx <= -50) && (dx > -100)) {
      that.data.flag3 = false
      this.setData({
        currentTab: that.data.swipeIndex - 1,
        
      })
    }
  }

實現效果如下：

​

總結

第三方元件庫帶給我們介面編寫上的方便程度是不言而喻的，但是其中必然會有一些與官方衝突的bug，例如在前文沒有提及的真機除錯時小橫條滑動卡頓不流暢的問題。所以在使用的時候也要權衡一下利弊，或者參考網上是否已經有了這些問題的解決辦法。