微信小程序入门四: 导航栏样式、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 按数组的顺序排序。