一、tabBar基本配置
自定义 tabBar 可以让开发者更加灵活地设置 tabBar 样式,以满足更多个性化的场景。
先附上结构图和源码
"tabBar":{
"color":"#000",
"selectedColor":"#1296db",
"borderStyle": "black",
"list":[{
"pagePath":"pages/posts/posts",
"text":"阅读",
"iconPath":"/images/icon/read.png",
"selectedIconPath":"/images/icon/read_active.png"
}, {
"pagePath":"pages/welcome/welcome",
"text":"我的",
"iconPath":"/images/icon/mine.png",
"selectedIconPath":"/images/icon/mine-active.png"
}]
}
1.1 配置app.json文件
在和window同级下新建tabBar字段
我们需要了解各个字段的含义
color //默认的tab字体颜色
borderStyle //tabBar上边框的颜色(仅支持black、white,默认black)
selectedColor //选中时的字体颜色
list // list中有几个对象就代表底部导航有几个(最小为2 最大为5)
list中的pagePath // 代表点击图标时要跳转到哪个页面(主要不要以/开头)
list中的text //代表表示文字
list中的iconPath //代表未选中状态下的字体图标路径
list中的selectedIconPath //代表选中状态下的字体图标路径
配置完成后我们看下效果图