实例内容
导航栏样式设置tabBar导航栏实例一:导航栏样式设置
小程序的导航栏样式在app.json
中定义。
这里设置导航,背景黑色,文字白色,文字内容测试小程序
app.json
内容:
{"pages":["pages/index/index","pages/login/login","pages/logs/logs"],"window":{"backgroundTextStyle":"red","navigationBarBackgroundColor": "#000","navigationBarTitleText": "测试小程序","navigationBarTextStyle":"#fff"}}
window
中的样式说明:
效果:
实例二: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相关属性定义说明:
tabBar list定义说明:
tabBar 是一个数组,只能配置最少2个、最多5个 tab,tab 按数组的顺序排序。
图标资源可以从这里获取:
博客名称:王乐平博客
博客地址:
CSDN博客地址:/lecepin