微信小程序入門四: 導航欄樣式、tabBar導航欄

實例內容

• 導航欄樣式設置
• tabBar導航欄

---

實例一：導航欄樣式設置

小程序的導航欄樣式在app.json中定義。

這里設置導航，背景黑色，文字白色，文字內容測試小程序

app.json內容：

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

window中的樣式說明：

屬性	類型	默認值	描述
navigationBarBackgroundColor	HexColor	000000 導航欄背景顏色，如”#000000”
navigationBarTextStyle	String	white	導航欄標題顏色，僅支持 black/white
navigationBarTitleText	String		導航欄標題文字內容
backgroundColor	HexColor	#ffffff	窗口的背景色
backgroundTextStyle	String	dark	下拉背景字體、loading 圖的樣式，僅支持 dark/light
enablePullDownRefresh	Boolean	false	是否開啟下拉刷新

效果：

---

實例二：tabBar導航欄

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

tabBar同樣在app.json中進行定義，看一下我在app.json中對tabBar的相關定義：

  "tabBar": { "selectedColor": "#1296db", "list": [{ "pagePath": "pages/index/index", "text": "首頁", "iconPath": "images/ico-home.png", "selectedIconPath": "images/ico-home-d.png" },{ "pagePath": "pages/setting/setting", "text": "設置", "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相關屬性定義說明：

屬性	類型	必填	默認值	描述
color	HexColor	是		tab 上的文字默認顏色
selectedColor	HexColor	是		tab 上的文字選中時的顏色
backgroundColor	HexColor	是		tab 的背景色
borderStyle	String	否	black	tabbar上邊框的顏色， 僅支持 black/white
list	Array	是		tab 的列表，詳見 list 屬性說明，最少2個、最多5個 tab
position	String	否	bottom	可選值 bottom、top

tabBar list定義說明：

屬性	類型	必填	說明
pagePath	String	是	頁面路徑，必須在 pages 中先定義
text	String	是	tab 上按鈕文字
iconPath	String	是	圖片路徑，icon 大小限制為40kb，建議尺寸為 81px * 81px
selectedIconPath	String	是	選中時的圖片路徑，icon 大小限制為40kb，建議尺寸為 81px * 81px

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