微信小程序------導航欄樣式、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": {
    "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"
    }]
  }

 注意：兩個圖標是有兩個路徑，第一個是當前默認圖標的路徑（"iconPath"）；第二個是被選中之后圖標路徑（"selectedIconPath"），停留在那個頁面，圖標變色。

二：tabBar導航欄

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

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

效果：

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 按數組的順序排序。