全局配置-TabBar
什么是TabBar?
TabBar是移动端应用常见的页面效果,用于实现多页面的快速切换。小程序中通常将其分为底部TabBar和顶部TabBar。注意:TabBar中只能配置最少2个、最多5个tab页签。当渲染顶部TabBar时,不显示icon,只显示文本。
TabBar的6个组成部分
- backgroundColor: TabBar的背景色
- selectedIconPath:选中时的图片路径
- borderStyle: TabBar上边框的颜色
- iconPath:未选中时的图片路径
- selectedColor: tab上的文字选中时的颜色
- color: tab上文字的默认(未选中)颜色
TabBar节点的配置项
属性 | 类型 | 必填 | 默认值 | 描述 |
---|---|---|---|---|
position | String | 否 | bottom | TabBar的位置,仅支持bottom/top |
borderStyle | String | 否 | black | TabBar上边框的颜色,仅支持black/white |
color | HexColor | 否 | #7A7E83 | Tab上文字的默认(未选中)颜色 |
selectedColor | HexColor | 否 | #3cc51f | Tab上的文字选中时的颜色 |
backgroundColor | HexColor | 否 | #fff | TabBar的背景色 |
list | Array | 是 | - | Tab页签的列表,最少2个、最多5个tab |
每个Tab项的配置选项
属性 | 类型 | 必填 | 描述 |
---|---|---|---|
pagePath | String | 是 | 页面路径,页面必须在pages中预先定义 |
text | String | 是 | Tab上显示的文字 |
iconPath | String | 否 | 未选中时的图标路径;当position为top时,不显示icon |
selectedIconPath | String | 否 | 选中时的图标路径;当position为top时,不显示icon |
案例:配置TabBar
需求描述
根据资料中提供的小图标,在小程序中配置如图所示的TabBar效果:
首页 消息 联系我们
实现步骤
-
拷贝图标资源
将资料目录中的images文件夹,拷贝到小程序项目根目录中。将需要用到的小图标分为3组,每组两个,其中:图片名称中包含-active的是选中之后的图标,图片名称中不包含-active的是默认图标。 -
新建3个对应的Tab页面
通过app.json文件的pages节点,快速新建3个对应的Tab页面,示例代码如下:
{
"pages": [
"pages/home/home",
"pages/message/message",
"pages/contact/contact"
]
}
其中,home是首页,message是消息页面,contact是联系我们页面。
- 配置TabBar选项
打开app.json配置文件,和pages、window平级,新增TabBar节点。TabBar节点中,新增list数组,这个数组中存放的是每个Tab项的配置对象。在list数组中,新增每一个Tab项的配置对象。对象中包含的属性有:pagePath指定当前Tab对应的页面路径,text指定当前Tab上按钮的文字,iconPath指定当前Tab未选中时的图片路径,selectedIconPath指定当前Tab被选中后高亮的图片路径。
示例代码:
"tabBar":{
"list": [
{
"pagePath": "pages/home/home",
"text":"首页",
"iconPath": "/images/tabs/home.png",
"selectedIconPath": "/images/tabs/home-active.png"
},
{
"pagePath": "pages/message/message",
"text": "消息",
"iconPath": "/images/tabs/message.png",
"selectedIconPath": "/images/tabs/message-active.png"
},
{
"pagePath": "pages/contact/contact",
"text":"联系我们",
"iconPath": "/images/tabs/contact.png",
"selectedIconPath": "/images/tabs/contact-active.png"
}
]
}