前言：小程序內(nèi)置的tabBar組件跳轉(zhuǎn)后，底部的tabBar還是一直存在的。有時(shí)候我們點(diǎn)擊tabBar后是希望跳到一個(gè)完整的界面，而不是還帶有tabBar的界面。這時(shí)候我們就得自定義tabBar了。

配置信息

• 在 app.json 中的 tabBar 項(xiàng)指定 custom 字段。
  
• 所有 tab 頁(yè)的 json 里需聲明 usingComponents 項(xiàng)，或者全局引入（在微信開發(fā)工具創(chuàng)建頁(yè)面時(shí)，json文件中會(huì)自動(dòng)生成，不用擔(dān)心這個(gè)配置的問題）

添加 tabBar 代碼文件

• 在文件的根目錄下添加
  

這里的文件夾名稱必須是custom-tab-bar，組件名稱必須為index

編寫tabBar(這里用自定義組件的方式編寫就可以)

• wxml,wxss都是直接復(fù)制官方文檔的實(shí)例代碼。有需要的可以直接去下就可以了
  https://developers.weixin.qq.com/miniprogram/dev/framework/ability/custom-tabbar.html
  

這里需要修改的地方是在wxml文件中綁定data-subpage。

• index.js

  Component({
  data: {
    selected: 0,
    color: "#7A7E83",
    selectedColor: "#3cc51f",
    "list": [
      {
        "pagePath": "/pages/index/Index",
        "iconPath": "/images/u101.png",
        "selectedIconPath": "/images/u101_selected.png",
        "text": "首頁(yè)"
      },
      {
        "subpage":"true",
        "pagePath": "/pages/shop/Shop",
        "iconPath": "/images/shop_cart.png",
        "selectedIconPath": "/images/shop_cart.png",
        "text": "購(gòu)物車"
      },
      {
        "pagePath": "/pages/mine/Mine",
        "iconPath": "/images/u98.png",
        "selectedIconPath": "/images/u98_selected.png",
        "text": "我的"
      }
    ]
  },

  /**
   * 組件的方法列表
   */
  methods: {
    switchTab(e) {
      const data = e.currentTarget.dataset
      const url = data.path
      if(data.subpage){
        wx.navigateTo({url:url,
          complete:function(res){
            console.log(res)
          },  })
      }else{
        console.log(e)
        wx.switchTab({url})
      }
      this.setData({
        selected: data.index
      })
    }
  }
})

說(shuō)白了就是在data中添加一個(gè)屬性subpage（自定義的）來(lái)控制自定義tabBar組件列表的元素的跳轉(zhuǎn)方式的。

通過 getTabBar 接口獲取組件實(shí)例，并調(diào)用 setData 更新選中態(tài)。

• 在每一個(gè)tab頁(yè)面的周期函數(shù)onShow里添加如下代碼（注意：每個(gè)tab頁(yè)面的selected值不同，對(duì)應(yīng)“custom-tab-bar”中data的list數(shù)組中的下標(biāo)）

   if (typeof this.getTabBar === 'function' && this.getTabBar()) {
    this.getTabBar().setData({
      selected: 0
    })
  }

注意：app.json文件中不能配置用wx.navigateTo()跳轉(zhuǎn)的頁(yè)面。

預(yù)覽