Tabbar 标签栏，用于在不同功能模块之间进行切换，图标建议尺寸84*84。

支持平台

App（vue）	App（nvue）	H5	小程序
✓	✓	✓	✓

代码演示

部分示例演示，完整使用请参考文档API。

基础使用

通过 tabBar 属性设置标签栏数据，current 属性设置当前选项卡，@click 为选项卡点击事件。

<wui-tabbar :tabBar="tabBar" :current="current" @click="itemClick"></wui-tabbar>

//tabBar数据
const tabBar = ref([{
    text: "组件",
    iconPath: "xxxxxxx.png",
    selectedIconPath: "xxxxxxx.png"
},
    {
        text: "布局",
        iconPath: "xxxxxxx.png",
        selectedIconPath: "xxxxxxx.png"
    },
    {
        text: "模板",
        iconPath: "xxxxxxx.png",
        selectedIconPath: "xxxxxxx.png"
    },
    {
        text: "我的",
        iconPath: "xxxxxxx.png",
        selectedIconPath: "xxxxxxx.png"
    }])

纯文本标签栏

通过 background 属性设置标签栏背景色，color 属性设置标签栏字体颜色，selectedColor 属性设置标签栏选中后字体颜色，size 属性设置标签栏字体大小。

<wui-tabbar background="rgba(0,0,0,.5)" color="rgba(255,255,255,.7)" selectedColor="#fff" size="32" font-weight="500" :tabBar="tabBar" :current="current"></wui-tabbar>

//tabBar数据
const tabBar = ref(["首页", "朋友", "消息", "我"])

//或者使用以下格式

const tabBar =ref([{
    text: "首页"
},
{
    text: "朋友"
},
{
    text: "消息"
},
{
    text: "我"
}])

中间仅使用图标，可设置宽高

tabBar 数据中设置 midButton 属性为true，然后传入 width 和 height 值改变图标宽高，单位rpx。 注意：宽高仅 midButton 为 true 时生效，设置 midButton 为 true 后 nvue 下不可再传入 text。

<wui-tabbar :tabBar="tabBar"></wui-tabbar>

//tabBar数据
const tabBar = ref([{
    text: "组件",
    iconPath: "xxxxxxxx.png",
    selectedIconPath: "xxxxxxxx.png"
},
{
    text: "布局",
    iconPath: "xxxxxxxx.png",
    selectedIconPath: "xxxxxxxx.png"
},
{
    iconPath: "xxxxxxxx.png",
    midButton: true,
    width: 96,
    height: 96
},
{
    text: "模板",
    iconPath: "xxxxxxxx.png",
    selectedIconPath: "xxxxxxxx.png"
},
{
    text: "我的",
    iconPath: "xxxxxxxx.png",
    selectedIconPath: "xxxxxxxx.png"
}])

Slots

插槽名称	说明
-	-

Props

属性名	类型	说明	默认值	平台差异说明
tabBar	Array	标签栏数据，具体格式见下方说明	[ ]	-
current	Number, String	当前索引	0	-
size	Number, String	字体大小，单位rpx	24	-
fontWeight	Number, String	文本字重	400	-
color	String	字体颜色	#333333	-
selectedColor	String	当前索引下字体高亮颜色	#465CFF	非Nvue端默认值为空，可通过css变量（--wui-color-primary）改变颜色
background	String	标签栏背景色	#FFFFFF	-
isBorder	Boolean	是否显示顶部边框	true	-
borderColor	String	边框颜色	#EEEEEE	仅Nvue端生效，非Nvue端通过css变量（--wui-color-border）改变颜色
isFixed	Boolean	是否固定在底部	true	-
badgeColor	String	角标字体颜色	#FFFFFF	-
badgeBackground	String	角标背景颜色	#FF2B2B	非Nvue端默认值为空，可通过css变量（--wui-color-danger）改变颜色
zIndex	Number, String	标签栏z-index值	980	Nvue端不支持，默认越靠后的元素层级越高，即将组件放置最底部
safeArea	Boolean	是否适配底部安全区	true	-

Events

初始化事件中会返回标签栏高度，单位px，Nvue端已加入iPhoneX等异形屏底部高度。

事件名	说明	回调参数
@init	标签栏初始化时触发	{ height:标签栏高度 }
@click	点击标签栏时触发	{ index:当前点击索引 ...tabBar[index]:当前索引下标签栏数据 }

//tabBar数据格式说明

 //数据格式一：纯文本
 const tabBar =ref(["首页", "朋友", "消息", "我"])
 
 //数据格式二：
const tabBar = ref([{
    text: "组件",
    iconPath: "xxxxxxxx.png",
    selectedIconPath: "xxxxxxxx.png"
},
{
    text: "布局",
    iconPath: "xxxxxxxx.png",
    selectedIconPath: "xxxxxxxx.png"
},
{
    iconPath: "xxxxxxxx.png",
    midButton: true,
    width: 96,
    height: 96
},
{
    text: "模板",
    iconPath: "xxxxxxxx.png",
    selectedIconPath: "xxxxxxxx.png"
},
{
    text: "我的",
    iconPath: "xxxxxxxx.png",
    selectedIconPath: "xxxxxxxx.png"
}])

//数据格式二中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 角标是否显示为圆点"//可选
}

为防止标签栏遮住页面内容，页面底部需留白高度不低于标签栏高度。非Nvue端页面外层还需加入以下样式兼容异形屏：

.wui-wrap {
	/* #ifndef APP-NVUE */
	padding-bottom: constant(safe-area-inset-bottom);
	padding-bottom: env(safe-area-inset-bottom);
	/* #endif */
}