---

實(shí)例內(nèi)容

• 導(dǎo)航欄樣式設(shè)置
• tabBar導(dǎo)航欄

---

實(shí)例一：導(dǎo)航欄樣式設(shè)置

小程序的導(dǎo)航欄樣式在app.json中定義。

這里設(shè)置導(dǎo)航，背景黑色，文字白色，文字內(nèi)容測(cè)試小程序

app.json內(nèi)容：

{"pages":["pages/index/index","pages/login/login","pages/logs/logs"],"window":{"backgroundTextStyle":"red","navigationBarBackgroundColor": "#000","navigationBarTitleText": "測(cè)試小程序","navigationBarTextStyle":"#fff"} }

window中的樣式說(shuō)明：

屬性類型默認(rèn)值描述

navigationBarBackgroundColor	HexColor	000000 導(dǎo)航欄背景顏色，如”#000000”
navigationBarTextStyle	String	white	導(dǎo)航欄標(biāo)題顏色，僅支持 black/white
navigationBarTitleText	String		導(dǎo)航欄標(biāo)題文字內(nèi)容
backgroundColor	HexColor	#ffffff	窗口的背景色
backgroundTextStyle	String	dark	下拉背景字體、loading 圖的樣式，僅支持 dark/light
enablePullDownRefresh	Boolean	false	是否開(kāi)啟下拉刷新

效果：

---

實(shí)例二：tabBar導(dǎo)航欄

tabBar挺好的，可以放置于頂部或者底部，用于不同功能頁(yè)面的切換。

tabBar同樣在app.json中進(jìn)行定義，看一下我在app.json中對(duì)tabBar的相關(guān)定義：

"tabBar": {"selectedColor": "#1296db","list": [{"pagePath": "pages/index/index","text": "首頁(yè)","iconPath": "images/ico-home.png","selectedIconPath": "images/ico-home-d.png"},{"pagePath": "pages/setting/setting","text": "設(shè)置","iconPath": "images/ico-setting.png","selectedIconPath": "images/ico-setting-d.png"},{"pagePath": "pages/help/help","text": "幫助","iconPath": "images/ico-help.png","selectedIconPath": "images/ico-help-d.png"}]}

效果：

tabBar相關(guān)屬性定義說(shuō)明：

屬性類型必填默認(rèn)值描述

color	HexColor	是		tab 上的文字默認(rèn)顏色
selectedColor	HexColor	是		tab 上的文字選中時(shí)的顏色
backgroundColor	HexColor	是		tab 的背景色
borderStyle	String	否	black	tabbar上邊框的顏色， 僅支持 black/white
list	Array	是		tab 的列表，詳見(jiàn) list 屬性說(shuō)明，最少2個(gè)、最多5個(gè) tab
position	String	否	bottom	可選值 bottom、top

tabBar list定義說(shuō)明：

屬性類型必填說(shuō)明

pagePath	String	是	頁(yè)面路徑，必須在 pages 中先定義
text	String	是	tab 上按鈕文字
iconPath	String	是	圖片路徑，icon 大小限制為40kb，建議尺寸為 81px * 81px
selectedIconPath	String	是	選中時(shí)的圖片路徑，icon 大小限制為40kb，建議尺寸為 81px * 81px

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

圖標(biāo)資源可以從這里獲取：www.iconfont.cn

---

博客名稱：王樂(lè)平博客

博客地址：http://blog.lepingde.com

CSDN博客地址：http://blog.csdn.net/lecepin

總結(jié)

以上是生活随笔為你收集整理的微信小程序入门四: 导航栏样式、tabBar导航栏的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。