博客简介
本篇博客介绍小程序的TabBar设置方法,并且提供图片资源供大家下载
- 属性
- 设置方法举例
- 图片资源
如果小程序是一个多 tab 应用(客户端窗口的底部或顶部有 tab 栏可以切换页面),可以通过 tabBar 配置项指定 tab 栏的表现,以及 tab 切换时显示的对应页面。
属性
以下是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 | tabBar 的位置,仅支持 bottom / top |
|
custom | boolean | 否 | false | 自定义 tabBar,见详情 | 2.5.0 |
属性 | 类型 | 必填 | 说明 |
---|---|---|---|
pagePath | string | 是 | 页面路径,必须在 pages 中先定义 |
text | string | 是 | tab 上按钮文字 |
iconPath | string | 否 | 图片路径,icon 大小限制为 40kb,建议尺寸为 81px * 81px,不支持网络图片。 当 position 为 top 时,不显示 icon。 |
selectedIconPath | string | 否 | 选中时的图片路径,icon 大小限制为 40kb,建议尺寸为 81px * 81px,不支持网络图片。 当 position 为 top 时,不显示 icon。 |
设置方法举例:
-
首先根据自己要导航的几个页面page
比如说将要设置三个导航选择,那么我们新建三个导航页面page1,page2,page3:
-
在app.json页面中设置配置
**注意:**要跳转的页面一定要在page中写明,所有页面路径,必须在 pages 中先定义
{
"pages": [
"pages/page1/page1",
"pages/page2/page2",
"pages/page3/page3"
],
"tabBar":{
"color":"#000",
"selectedColor":"#fff",
"backgroundColor":"#7B68EE",
"list":[{
"pagePath":"pages/page1/page1",
"text":"Page1",
"iconPath":"images/Home.png",
"selectedIconPath":"images/selectHome.png"
},{
"pagePath": "pages/page2/page2",
"text": "Page2",
"iconPath": "images/fav.png",
"selectedIconPath": "images/selectFav.png"
},{
"pagePath": "pages/page3/page3",
"text": "Page3",
"iconPath": "images/me.png",
"selectedIconPath": "images/selectMe.png"
}]
}
}