微信小程式入門四: 導航欄樣式、tabBar導航欄
阿新 • • 發佈:2019-01-06
例項內容
- 導航欄樣式設定
- 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 按陣列的順序排序。