今天說(shuō)說(shuō)tabBar的使用，先看看官方說(shuō)法：如果小程序是一個(gè)多 tab 應(yīng)用（客戶端窗口的底部或頂部有 tab 欄可以切換頁(yè)面），可以通過(guò) tabBar 配置項(xiàng)指定 tab 欄的表現(xiàn)，以及 tab 切換時(shí)顯示的對(duì)應(yīng)頁(yè)面。

備注：

1. 當(dāng)設(shè)置 position 為 top 時(shí)，將不會(huì)顯示 icon

2. tabBar 中的 list 是一個(gè)數(shù)組，只能配置最少2個(gè)、最多5個(gè) tab，tab 按數(shù)組的順序排序。

   
   

今天在做投一個(gè)小程序時(shí)，也用到了tabBar，先看一下示例：

為什么沒有自己實(shí)現(xiàn)tabBar？因?yàn)樽约簩?shí)現(xiàn)的tabBar，沒有官方的常駐底部的效果好，官方的組件也有限制：不能完全滿足自定義需求。比如不支持iconfont圖標(biāo)，也不能展示其他樣式風(fēng)格。

不廢話，來(lái)看代碼吧，代碼需要在app.json中進(jìn)行配置，如下：

參數(shù)說(shuō)明：

color：tab 上的文字默認(rèn)顏色

selectedColor： tab 上的文字選中時(shí)的顏色

backgroundColor：tab 的背景色

borderStyle：tabbar上邊框的顏色， 僅支持 black/white

position：可選值 bottom、top

注：color顏色請(qǐng)一定寫成十六進(jìn)制顏色，不要用RGB顏色，IOS設(shè)備上不識(shí)別RGB顏色~

可能會(huì)踏的坑：

其他頁(yè)面，如果需要跳轉(zhuǎn)至帶tabBar的頁(yè)面，必須使用wx.swichTab()，使用wx.navigateTo()和wx.redirectTo()都無(wú)效~