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

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

"tabBar": {

    "color": "#9e9e9e",

    "selectedColor": "#d03a29",

    "borderStyle": "black",

    "list": [

      {

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

        "text": "首頁(yè)",

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

        "selectedIconPath": "images/icon1_on.png"

      },

      {

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

        "text": "活動(dòng)報(bào)名",

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

        "selectedIconPath": "images/icon2_on.png"

      },

      {

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

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

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

        "selectedIconPath": "images/icon3_on.png"

      }

    ]

  },

屬性作用：

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

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

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

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

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

pagePath 頁(yè)面訪問(wèn)地址

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

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

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

2、tabBer配置注意事項(xiàng)

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

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

wx.switchTab({

  url: 'page/index/index'

})

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