微信小程序中多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，例如在前文沒有提及的真機調試時小橫條滑動卡頓不流暢的問題。所以在使用的時候也要權衡一下利弊，或者參考網上是否已經有了這些問題的解決辦法。