今天說說tabBar的使用,先看看官方說法:如果小程序是一個多 tab 應(yīng)用(客戶端窗口的底部或頂部有 tab 欄可以切換頁面),可以通過 tabBar 配置項指定 tab 欄的表現(xiàn),以及 tab 切換時顯示的對應(yīng)頁面。
備注:
今天在做投一個小程序時,也用到了tabBar,先看一下示例:
為什么沒有自己實現(xiàn)tabBar?因為自己實現(xiàn)的tabBar,沒有官方的常駐底部的效果好,官方的組件也有限制:不能完全滿足自定義需求。比如不支持iconfont圖標(biāo),也不能展示其他樣式風(fēng)格。
不廢話,來看代碼吧,代碼需要在app.json中進(jìn)行配置,如下:
參數(shù)說明: color:tab 上的文字默認(rèn)顏色 selectedColor: tab 上的文字選中時的顏色 backgroundColor:tab 的背景色 borderStyle:tabbar上邊框的顏色, 僅支持 black/white position:可選值 bottom、top 注:color顏色請一定寫成十六進(jìn)制顏色,不要用RGB顏色,IOS設(shè)備上不識別RGB顏色~
可能會踏的坑: 其他頁面,如果需要跳轉(zhuǎn)至帶tabBar的頁面,必須使用wx.swichTab(),使用wx.navigateTo()和wx.redirectTo()都無效~ |