??tabBar 的介紹
下面引用開(kāi)發(fā)者文檔中的介紹：
如果小程序是一個(gè)多 tab 應(yīng)用（客戶端窗口的底部或頂部有 tab 欄可以切換頁(yè)面），可以通過(guò) tabBar 配置項(xiàng)指定 tab 欄的表現(xiàn)，以及 tab 切換時(shí)顯示的對(duì)應(yīng)頁(yè)面。
tabBar：翻譯為標(biāo)簽欄。
下面展示了兩個(gè)小程序的 tab 欄，分別是在頂部、底部。
當(dāng)我們點(diǎn)擊不同的欄，就會(huì)出現(xiàn)各自對(duì)應(yīng)的頁(yè)面。這也 tabBar 字段的作用。
??tabBar 字段的屬性介紹
下面依次對(duì)重要屬性進(jìn)行講解，其中最最最主要的屬性就是list了，是一個(gè)數(shù)組類型的。
?list
list 是數(shù)組類型的，它里面存放的就是一個(gè)一個(gè) tab（首頁(yè)、訂單、我的…這樣的），主要包括 tab 的頁(yè)面路徑，tab 圖標(biāo)（這又分點(diǎn)擊展示的圖標(biāo)，沒(méi)點(diǎn)擊時(shí)展示的圖標(biāo)），tab 文本。只能配置最少 2 個(gè)、最多 5 個(gè) tab。tab 按數(shù)組的順序排序，每個(gè)項(xiàng)都是一個(gè)對(duì)象。
list 中存放對(duì)象的屬性如下：
- 必填屬性：
pagePath（String）：頁(yè)面路徑，必須在pages 元素（目錄）中定義的。 - 必填屬性：
text（String）：tab 上按鈕的文字。 - 非必填：
iconPath（String）：沒(méi)有點(diǎn)擊展示的圖標(biāo)。icon 大小限制為 40kb，建議尺寸為 81px * 81px。tab 在頂部的時(shí)候是不會(huì)顯示圖標(biāo)的。 - 非必填：
selectedIconPath（String）：點(diǎn)擊后展示的圖標(biāo)。icon 大小限制為 40kb，建議尺寸為 81px * 81px。同樣 tab 在頂部的時(shí)候不會(huì)顯示圖標(biāo)的。
測(cè)試
- 第一步：準(zhǔn)備好圖標(biāo)，如果需要的話
- 第二步：page 頁(yè)面的準(zhǔn)備：
- 第三步：開(kāi)始寫(xiě)tabBar 字段下的 list 屬性配置：
- 第四步：欣賞成果：
點(diǎn)擊首頁(yè)展示的圖標(biāo)：
沒(méi)點(diǎn)擊呢？
?color 和 selectedColor
我感覺(jué)看到這屬性名都可以知道個(gè)大概了，駝峰式的命名。很清楚感覺(jué)。
- color：是表示沒(méi)有點(diǎn)擊展示的字體顏色；
- selectedColor：是表示點(diǎn)擊了展示的字體顏色。
注意：它們都是要十六進(jìn)制顏色類型的。十六進(jìn)制顏色碼表。
?backgroundColor
定義 tabBar 的背景顏色。
?position
就定義是頂部 tabBar（標(biāo)簽欄），還是底部。默認(rèn)是在底部。
咱來(lái)看看 top（頂部標(biāo)簽欄） 長(zhǎng)什么樣吧：
文章來(lái)源：http://www.zghlxwxcb.cn/news/detail-782132.html
總結(jié)
面向文檔編程，tabBar 字段也就那么回事嘛！??????文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-782132.html
到了這里，關(guān)于【微信小程序入門篇】全局配置 | 頁(yè)面切換之tabBar配置項(xiàng)的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
