微信小程序自定義tab，多層tab嵌套實現

小程序最近是愈來愈火了……
作小程序有一段時間了，總結一下項目中遇到的問題及解決辦法吧。

項目中有個多 tab 嵌套的需求，進入程序主界面下面有兩個 tab，進入A模塊後，A模塊最底下又有多個tab，每一個tab上又嵌了2-4個不等的tab。。。

這種變態需求只能自定義tab了。

其實若是項目不是很複雜，沒有多tab嵌套的需求，徹底能夠用小程序官方的 tabBar，方便快捷。
官方 tabBar 地址：
developers.weixin.qq.com/miniprogram…

---

1、Demo結構

先看效果圖吧

結構是這樣的：程序主界面包含兩個 tab：主頁和個人，主頁又包含兩個tab：最熱和最新；個人也包含兩個tab：電影和音樂。
關係圖以下：

項目
    主頁
        最熱
        最新
    個人
        電影
        音樂
複製代碼

2、開始擼代碼

再看代碼結構

兩種頁面結構

小程序的頁面分爲兩種：page 和 components。
page就是普通的頁面， components是小程序爲實現模塊化而提供的自定義組件。

相同點：
都由四個文件：.js、.json、.wxml、.wxss、構成，.wxml、.wxss寫法徹底相同。

不一樣點：

1. components要在json文件中註明："component": true

{
  "component": true,
  "usingComponents": {
    "movie": "movie/movie",
    "music": "music/music"
  }
}
複製代碼

2. js文件的結構和生命週期函數不一樣
   下面是自動生成的page和components代碼，能夠感覺下

page 的 js 代碼

Page({

  /**
   * 頁面的初始數據
   */
  data: {
  
  },

  /**
   * 生命週期函數--監聽頁面加載
   */
  onLoad: function (options) {
  
  },

  /**
   * 生命週期函數--監聽頁面初次渲染完成
   */
  onReady: function () {
  
  },

  /**
   * 生命週期函數--監聽頁面顯示
   */
  onShow: function () {
  
  },

  /**
   * 生命週期函數--監聽頁面隱藏
   */
  onHide: function () {
  
  },

  /**
   * 生命週期函數--監聽頁面卸載
   */
  onUnload: function () {
  
  },

  /**
   * 頁面相關事件處理函數--監聽用戶下拉動做
   */
  onPullDownRefresh: function () {
  
  },

  /**
   * 頁面上拉觸底事件的處理函數
   */
  onReachBottom: function () {
  
  },

  /**
   * 用戶點擊右上角分享
   */
  onShareAppMessage: function () {
  
  }
})
複製代碼

component 的 js 代碼

Component({
  /**
   * 組件的屬性列表
   */
  properties: {

  },

  /**
   * 組件的初始數據
   */
  data: {

  },

  /**
   * 組件的方法列表
   */
  methods: {

  }
})

複製代碼

本例中每一個 tab 都是一個小程序中定義的 component , 只有最外層包裹的 myapp 是 page，由於page中只能嵌入component，component中也能夠嵌入component。

代碼解析

先看myapp，這是程序的主界面。它包含了兩個tab：home 和 mine，分別對應頁面下方的 主頁 和 個人。
要引入自定義組件須要在 myapp.json文件中聲明：

{
  "usingComponents":{
    "home": "./home/home",
    "mine": "./mine/mine"
  }
}
複製代碼

如今，就能夠在 myapp.wxml 文件中愉快的引用了

<view class='container'>
  <view class='content'>
    <view wx:if='{{currentTab == 0}}'>
      <home/>
    </view>
    <view wx:if='{{currentTab == 1}}'>
      <mine/>
    </view>
  </view>

  <!-- 下面的兩個tab -->
  <view class='bottom-tab'>
    <view class='tab-item {{currentTab == 0 ? "active" : ""}}' data-current="0" bindtap='switchTab'>
      <image src='{{currentTab == 0 ? "../../assets/home_active.png" : "../../assets/home.png"}}' class='item-img'></image>
      <text class='item-text'>主頁</text>
    </view>

    <view class='tab-item {{currentTab == 1 ? "active" : ""}}' data-current="1" bindtap='switchTab'>
      <image src='{{currentTab == 1 ? "../../assets/mine_active.png" : "../../assets/mine.png"}}' class='item-img'></image>
      <text class='item-text'>個人</text>
    </view>
  </view>
</view>
複製代碼

tab切換的原理是根據 wx:if 或者 hidden 來控制視圖的顯示和隱藏，頁面的data中設置一個變量currentTab來記錄當前點擊的是哪一個tab，每次點擊的時候更新currentTab的值。

切換tab的方法：

switchTab(e) {
    this.setData({ currentTab: e.currentTarget.dataset.current });
}
複製代碼

這裏有幾個須要注意的點：

1. 這裏判斷相等用了 == 而不是 === ，由於經過 e.currentTarget.dataset.current取到的值是字符串類型的，也就是給 data 設置的值是字符串的0和1，若是用 === 就會判斷出錯。固然也能夠強轉成數字類型的，我比較懶~
2. 控制組件顯示隱藏能夠用 wx:if 也能夠用 hidden。二者是區別是若是用 wx:if ，每次切換tab的時候組件都會從新渲染，生命週期方法會從新調用執行。而用 hidden則不會從新渲染，生命週期函數也不會從新調用。
   具體用哪一個看業務需求了，貼一段官方的描述：

再看主頁home，它自己是一個component，又包含了兩個component ：最熱hot 和 最新new。
一樣須要在home.json中註冊這兩個組件

{
  "component": true,
  "usingComponents": {
    "hot": "hot/hot",
    "new": "new/new"
  }
}
複製代碼

注意home自己是一個component，因此須要註明"component": true

佈局文件 home.wxml

<view class='container'>
  <view class='tab-wrapper'>
    <view id='tableft' class='tab-left {{currentTab === 0 ? "tab-active":""}}' bindtap='switchTab'>最熱</view>
    <view id='tabright' class='tab-right {{currentTab === 1 ? "tab-active" : ""}}' bindtap='switchTab'>最新</view>
  </view>

  <view class='content-wrapper' wx:if='{{currentTab === 0}}'><hot/></view>
  <view class='content-wrapper' wx:if='{{currentTab === 1}}'><new/></view>
</view>
複製代碼

js文件 home.js

Component({
  /**
   * 組件的屬性列表
   */
  properties: {

  },

  /**
   * 組件的初始數據
   */
  data: {
    currentTab: 0
  },

  /**
   * 組件的方法列表
   */
  methods: {
    switchTab(e) {
      console.log(e)
      let tab = e.currentTarget.id
      if (tab === 'tableft') {
        this.setData({ currentTab: 0 })
      } else if (tab === 'tabright') {
        this.setData({ currentTab: 1 })
      }
    }
  }
})
複製代碼

給兩個tab的view設置了id屬性值爲tableft和tabright，設置了id後就能夠用e.currentTarget.id獲取到當前點擊的是哪一個元素了。

其餘幾個頁面的代碼都大同小異，主要是判斷當前點擊的是哪一個tab，而後根據currentTab判斷該顯示或隱藏哪一個組件。

源碼地址：
github.com/cachecats/m…