微信小程序自定义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…