# Tabbar 标签栏
# 介绍
为页面提供导航功能，常在页面底部，用于页面切换。
# 引入
在 main.js 中引入，详细介绍见快速上手。
# 使用
引入组件后，可以在Vue文件中使用
<vs-tabbar></vs-tabbar>
1
# 代码演示
# 基础用法
<vs-tabbar list="tabbarList"></vs-tabbar>
1
tabbarList接收一个数组，列表的元素为对象，对象格式为
tabbarList: {
title: '文字',
icon: '图标名', // 引用了vs-icon组件，图标的对应关系请查看vs-icon底部的json，如不需要图标可以省略
index: 0, // 下标符，建议是连续数字
}
1
2
3
4
5
2
3
4
5
# 导航高度
height决定导航栏高度。
<vs-tabbar height="8vh"></vs-tabbar>
1
# 导航图标
icon是布尔值，决定是否显示图标，若关闭则tabbarList不需要icon属性，默认为false。
<vs-tabbar>默认关闭</vs-tabbar>
<vs-tabbar icon>开启图标</vs-tabbar>
1
2
2
# 激活状态
vs-tabbar默认不激活状态黑字白底，激活状态白字黑底。组件可以通过normal属性和active属性修改默认样式。
两个属性均接收对象，对象格式如下，含有一个color和bgcolor属性：
active: {
color: 'red',
bgcolor: 'pink',
}
normal: {
color: 'darkred',
bgcolor: 'red',
}
1
2
3
4
5
6
7
8
2
3
4
5
6
7
8
<vs-tabbar :active="active" :normal="normal"></vs-tabbar>
1
