配置基本tabbar
属性 | 类型 | 必填 | 默认值 | 描述 | 平台差异说明 |
---|---|---|---|---|---|
position | String | 否 | bottom | 可选值 bottom、top | top 值仅微信小程序支持 |
position的默认值可以看出是底部的tabbar
属性 | 类型 | 必填 | 默认值 | 描述 | 平台差异说明 |
---|---|---|---|---|---|
list | Array | 是 | tab 的列表,详见 list 属性说明,最少2个、最多5个 tab |
list数组里的每一项就是来配置每一个tabbar具体的表现的
list里面可以配置什么
属性 | 类型 | 必填 | 说明 |
---|---|---|---|
pagePath | String | 是 | 页面路径,必须在page中先定义 |
text | String | 是 | tab上按钮文字,在5+APP和H5平台作为非必填。例如中间可放一个没有文字的+号图标 |
iconPath | String | 否 | 图片路径,icon大小限制为40kb,建议尺寸为81px*81px,当postion为top时,此参数无效,不支持网络图片,不支持字体图标 |
selectedIconPath | String | 否 | 选中时的图片路径,icon大小限制为40kb,建议尺寸为81px*81px,当postion为tio时,此参数无效 |
配置一个基本的tabbar:
src > pages.json
{
"pages": [
{
"path": "pages/index/index",
"style": {
"navigationBarTitleText": "uni-app"
}
},
{
"path": "pages/message/message"
},
{
"path": "pages/player/player"
}
],
"globalStyle": {
"navigationBarTextStyle": "black",
"navigationBarTitleText": "uni-app",
"navigationBarBackgroundColor": "#F8F8F8",
"backgroundColor": "#F8F8F8"
},
"tabBar":{
"list": [
{
"text": "首页",
"pagePath": "pages/index/index",
"iconPath": "static/images/home.png",
"selectedIconPath": "static/images/selectHome.png"
},
{
"text": "信息",
"pagePath": "pages/message/message",
"iconPath": "static/images/message.png",
"selectedIconPath": "static/images/selectMessage.png"
}
]
}
}
这样就实现了最基本的tabbar
tabbar常用的属性
color
属性 | 类型 | 必填 | 默认值 | 描述 | 平台差异说明 |
---|---|---|---|---|---|
color | HexColor | 是 | tab上的文字默认颜色 |
selectedColor
属性 | 类型 | 必填 | 默认值 | 描述 | 平台差异说明 |
---|---|---|---|---|---|
selectedColor | HexColor | 是 | tab上文字选中时的颜色 |
backgroundColor
属性 | 类型 | 必填 | 默认值 | 描述 | 平台差异说明 |
---|---|---|---|---|---|
backgroundColor | HexColor | 是 | tab背景颜色 |
borderStyle
属性 | 类型 | 必填 | 默认值 | 描述 | 平台差异说明 |
---|---|---|---|---|---|
borderStyle | String | 否 | black | tabbar上边框颜色,仅支持black/white | App 2.3.4+支持其他颜色值 |
position
属性 | 类型 | 必填 | 默认值 | 描述 | 平台差异说明 |
---|---|---|---|---|---|
position | String | 否 | bottom | 可选值 bottom、top | top 值仅微信小程序支持 |