Tabbar 标签栏 
概述
Tabbar 标签栏，用于在不同功能模块之间进行切换，图标建议尺寸84*84。
# 支持平台
| App-vue | App-Nvue | 微信小程序 | 支付宝小程序 | 百度小程序 | 字节小程序 | QQ小程序 | H5 | PC | 快手小程序 | 钉钉小程序 |
|---|---|---|---|---|---|---|---|---|---|---|
| ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ |
温馨提示
一般来说我们会通过 z-index + position 来进行层级的设置，但是 weex （Nvue）不支持 z-index 设置层级关系，默认越靠后的元素层级越高。
组件内部使用了 fui-icon（字体图标）组件，非 easycom 组件模式下需要手动引入组件（打开组件内部注释的引入内容，引入路径按实际调整）。【V2.2.0+】
# 引入
以下介绍两种常用的引入方式。
第一种：在页面中引用、注册
import fuiTabbar from "@/components/firstui/fui-tabbar/fui-tabbar.vue"
export default {
components:{
fuiTabbar
}
}
1
2
3
4
5
6
2
3
4
5
6
第二种：easycom组件规范
传统vue组件，需要安装、引用、注册，三个步骤后才能使用组件。easycom将其精简为一步。
First UI easycom配置请查看 快速上手。
如果不了解easycom，可先查看 官网文档 (opens new window)。
# 代码演示
部分示例演示，完整使用请参考示例程序以及文档API。
基础使用
通过 tabBar 属性设置标签栏数据，current 属性设置当前选项卡，@click 为选项卡点击事件。
<fui-tabbar :tabBar="tabBar" :current="current" @click="itemClick"></fui-tabbar>
1
//tabBar数据
tabBar: [{
text: "组件",
iconPath: "/static/images/tabbar/assembly_default_3x.png",
selectedIconPath: "/static/images/tabbar/assembly_selected_3x.png"
},
{
text: "布局",
iconPath: "/static/images/tabbar/layout_default_3x.png",
selectedIconPath: "/static/images/tabbar/layout_selected_3x.png"
},
{
text: "模板",
iconPath: "/static/images/tabbar/mod_default_3x.png",
selectedIconPath: "/static/images/tabbar/mod_selected_3x.png"
},
{
text: "我的",
iconPath: "/static/images/tabbar/my_default_3x.png",
selectedIconPath: "/static/images/tabbar/my_selected_3x.png"
}]
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
纯文本标签栏
通过 background 属性设置标签栏背景色，color 属性设置标签栏字体颜色，selectedColor 属性设置标签栏选中后字体颜色，size 属性设置标签栏字体大小。
<fui-tabbar background="rgba(0,0,0,.5)" color="rgba(255,255,255,.7)" selectedColor="#fff" size="32" font-weight="500" :tabBar="tabBar" :current="current"></fui-tabbar>
1
//tabBar数据
tabBar: ["首页", "朋友", "消息", "我"]
//或者使用以下格式
tabBar: [{
text: "首页"
},
{
text: "朋友"
},
{
text: "消息"
},
{
text: "我"
}]
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
中间仅使用图标，可设置宽高
tabBar 数据中设置 midButton 属性为true，然后传入 width 和 height 值改变图标宽高，单位rpx。
注意：宽高仅midButton为true时生效，设置midButton为true后nvue下不可再传入text。
<fui-tabbar :tabBar="tabBar"></fui-tabbar>
1
//tabBar数据
tabBar: [{
text: "组件",
iconPath: "/static/images/tabbar/assembly_default_3x.png",
selectedIconPath: "/static/images/tabbar/assembly_selected_3x.png"
},
{
text: "布局",
iconPath: "/static/images/tabbar/layout_default_3x.png",
selectedIconPath: "/static/images/tabbar/layout_selected_3x.png"
},
{
iconPath: "/static/images/common/icon_plus_3x.png",
midButton: true,
width: 96,
height: 96
},
{
text: "模板",
iconPath: "/static/images/tabbar/mod_default_3x.png",
selectedIconPath: "/static/images/tabbar/mod_selected_3x.png"
},
{
text: "我的",
iconPath: "/static/images/tabbar/my_default_3x.png",
selectedIconPath: "/static/images/tabbar/my_selected_3x.png"
}
]
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
中间大图标（凸出），Nvue端暂不支持
tabBar 数据中设置 midButton 属性为true，然后传入 width 和 height 值改变图标宽高，通过 bottom 值来调整图标位置。
<fui-tabbar :tabBar="tabBar"></fui-tabbar>
1
tabBar: [{
text: "组件",
iconPath: "/static/images/tabbar/assembly_default_3x.png",
selectedIconPath: "/static/images/tabbar/assembly_selected_3x.png"
},
{
text: "布局",
iconPath: "/static/images/tabbar/layout_default_3x.png",
selectedIconPath: "/static/images/tabbar/layout_selected_3x.png"
},
{
text: "发布",
iconPath: "/static/images/common/icon_plus_3x.png",
midButton: true,
width: 126,
height: 126,
bottom: 26
},
{
text: "模板",
iconPath: "/static/images/tabbar/mod_default_3x.png",
selectedIconPath: "/static/images/tabbar/mod_selected_3x.png"
},
{
text: "我的",
iconPath: "/static/images/tabbar/my_default_3x.png",
selectedIconPath: "/static/images/tabbar/my_selected_3x.png"
}
]
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
带角标
tabBar 数据中加入 badge 属性设置角标数，为0或不传值则不显示，可使用 dot 属性设置角标是否显示为圆点 。
<fui-tabbar :tabBar="tabBar"></fui-tabbar>
1
//tabBar数据
tabBar: [{
text: "首页",
iconPath: "/static/images/component/tabbar/icon_home.png",
selectedIconPath: "/static/images/component/tabbar/icon_home_fill.png",
badge: 1
},
{
text: "分类",
iconPath: "/static/images/component/tabbar/icon_classify.png",
selectedIconPath: "/static/images/component/tabbar/icon_classify_fill.png",
badge: 2,
dot: true
},
{
text: "我的",
iconPath: "/static/images/component/tabbar/icon_my.png",
selectedIconPath: "/static/images/component/tabbar/icon_my_fill.png"
}
]
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
# Slots
| 插槽名称 | 说明 |
|---|---|
| - | - |
# Props
| 属性名 | 类型 | 说明 | 默认值 | 平台差异说明 |
|---|---|---|---|---|
| tabBar | Array | 标签栏数据，具体格式见下方说明 | [ ] | - |
| current | Number, String | 当前索引 | 0 | - |
| size | Number, String | 字体大小，单位rpx | 24 | - |
| fontWeight | Number, String | 文本字重 | 400 | - |
| iconSize V2.2.0+ | Number, String | 字体图标大小，单位由iconUnit属性决定 | 56 | - |
| iconUnit V2.2.0+ | String | 字体图标大小单位，可选值px 和 rpx | rpx | - |
| color | String | 字体以及字体图标颜色 | #333333 | - |
| selectedColor | String | 当前索引下字体以及字体图标高亮颜色 | #465CFF | 可通过全局变量改变颜色 |
| background | String | 标签栏背景色 | #FFFFFF | - |
| isBorder | Boolean | 是否显示顶部边框 | true | - |
| borderColor | String | 边框颜色 | #EEEEEE | 仅Nvue端生效，非Nvue端通过css变量（--fui-color-border）改变颜色 |
| isFixed | Boolean | 是否固定在底部 | true | - |
| badgeColor | String | 角标字体颜色 | #FFFFFF | - |
| badgeBackground | String | 角标背景颜色 | #FF2B2B | 非Nvue端默认值为空，可通过css变量（--fui-color-danger）改变颜色 |
| zIndex | Number, String | 标签栏z-index值 | 980 | Nvue端不支持，默认越靠后的元素层级越高，即将组件放置最底部 |
| safeArea V1.5.0+ | Boolean | 是否适配底部安全区，isFixed为true时生效 | true | - |
| fixedHeight V1.9.9+ | Boolean | init事件返回高度是否包含异形屏底部安全区固定高度 | false | 非Nvue端和头条小程序有效 |
//tabBar数据格式说明
//数据格式一：纯文本
tabBar: ["首页", "朋友", "消息", "我"]
//数据格式二：
tabBar: [{
text: "首页",
iconPath: "/static/images/component/tabbar/icon_home.png",
selectedIconPath: "/static/images/component/tabbar/icon_home_fill.png"
},
{
text: "分类",
iconPath: "/static/images/component/tabbar/icon_classify.png",
selectedIconPath: "/static/images/component/tabbar/icon_classify_fill.png"
},
{
text: "我的",
iconPath: "/static/images/component/tabbar/icon_my.png",
selectedIconPath: "/static/images/component/tabbar/icon_my_fill.png"
}
]
//数据格式三（使用字体图标）：
tabBar:[{
text: "首页",
iconName: "home",
selectedIconName: "home-fill"
}, {
text: "消息",
iconName: "message",
selectedIconName: "message-fill"
}, {
text: "我的",
iconName: "my",
selectedIconName: "my-fill"
}]
//数据格式二中Object约定属性详细说明
//其他属性可自行添加，点击事件中会回传
{
text: "String 标签文本", //可选，当无图标时必选
iconPath: "String 标签图片图标src",//可选，当无文本且无字体图标时必选
selectedIconPath: "String 标签选中后图片图标src",//可选，当无文本且无字体图标时必选
midButton: "Boolean 是否为中间大图标",//可选，仅支持图片图标
width: "Number 图标宽度，单位rpx，仅midButton为true时生效",//可选
height:"Number 图标宽度，单位rpx，仅midButton为true时生效",//可选
bottom: "Number 中间大图标bottom值，调整位置，单位rpx",//可选
center: "Boolean 中间大图标是否垂直居中",//可选
badge: "Number 角标数",//可选
dot:"Boolean 角标是否显示为圆点",//可选
iconName:"String 未选中时字体图标name",//可选，V2.2.0+
selectedIconName:"String 选中时字体图标name",//可选，V2.2.0+
iconSize:"Number 字体图标大小",//可选，默认使用props属性值，V2.2.0+
iconUnit:"String 字体图标单位，默认使用props属性值，可传值px 和 rpx",//可选，V2.2.0+
customPrefix:"String 自定义图标，定义字体class名称",//可选，V2.2.0+
color:"String 字体图标颜色",//可选，V2.2.0+
selectedColor:"String 字体图标选中时颜色",//可选，V2.2.0+
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
# Events
初始化事件中会返回标签栏高度，单位px，Nvue端和头条小程序已加入iPhoneX等异形屏底部高度（其他平台若需要返回则需要设置fixedHeight属性为true）。
| 事件名 | 说明 | 回调参数 |
|---|---|---|
| @init | 标签栏初始化时触发 | { height:标签栏高度 } |
| @click | 点击标签栏时触发 | { index:当前点击索引 ...tabBar[index]:当前索引下标签栏数据 } |
为防止标签栏遮住页面内容，页面底部需留白高度不低于标签栏高度。非Nvue端和头条小程序如果fixedHeight属性没有设置为true，则页面外层还需加入以下样式（或者在页面最底部加入`fui-safe-area` 组件）兼容异形屏：
.fui-wrap {
/* #ifndef APP-NVUE */
padding-bottom: constant(safe-area-inset-bottom);
padding-bottom: env(safe-area-inset-bottom);
/* #endif */
}
1
2
3
4
5
6
2
3
4
5
6
示例预览
# 示例代码地址
VIP内容代码请查看订单页下载的组件库示例源码。# 特别说明
该组件为付费组件，UNI-APP版VIP用户可免费使用 。