在微信小程序的開發(fā)當(dāng)中會遇到底部多tab欄切換的需求，這時候就需要使用微信小程序的tabber，通過配置tabber即可實現(xiàn)底部多tab欄跳轉(zhuǎn)切換的功能。

1、在小程序app.json中加入tabBer

"tabBar": {

    "color": "#9e9e9e",

    "selectedColor": "#d03a29",

    "borderStyle": "black",

    "list": [

      {

        "pagePath": "pages/index/index",

        "text": "首頁",

        "iconPath": "images/icon1.png",

        "selectedIconPath": "images/icon1_on.png"

      },

      {

        "pagePath": "pages/hdbm/hdbm",

        "text": "活動報名",

        "iconPath": "images/icon2.png",

        "selectedIconPath": "images/icon2_on.png"

      },

      {

        "pagePath": "pages/team/team",

        "text": "加入團(tuán)隊",

        "iconPath": "images/icon3.png",

        "selectedIconPath": "images/icon3_on.png"

      }

    ]

  },

屬性作用：

tabBar  指底部的 導(dǎo)航配置屬性

color  未選擇時 底部導(dǎo)航文字的顏色

selectedColor  選擇時 底部導(dǎo)航文字的顏色

borderStyle  底部導(dǎo)航上邊框的顏色

list   導(dǎo)航配置數(shù)組（最少2個、最多5個tab）

pagePath 頁面訪問地址

text  導(dǎo)航圖標(biāo)下方文字

iconPath 未選擇時 圖標(biāo)路徑

selectedIconPath 選中時 圖標(biāo)路徑

2、tabBer配置注意事項

tabBer中pagePath頁面跳轉(zhuǎn)地址需要在app.json頁面中pages數(shù)組中進(jìn)行定義，否則會導(dǎo)致頁面無法跳轉(zhuǎn)。

頁面跳轉(zhuǎn)到tabber中配置的某一個頁面時需要使用wx.switchTab進(jìn)行跳轉(zhuǎn)。

wx.switchTab({

  url: 'page/index/index'

})

跳轉(zhuǎn)到tabBer頁面，并關(guān)閉其他所有非tabBer頁