Tabs 标签页，分隔内容上有关联但属于不同类别的数据集合。

支持平台

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

基础使用

通过 tabs 属性设置标签页数据，change 为标签页切换事件。

<wui-tabs :tabs="tabs" @change="change"></wui-tabs>

//数据格式一
tabs: ['常用服务', '门诊服务', '住院服务', '特色服务']

滑块与内容同宽

通过 short 属性设置值为 false 即可让滑块与内容同宽，默认滑块宽度为固定值45rpx。

<wui-tabs :tabs="tabs" :short="false"></wui-tabs>

超出一屏，禁用 <标签八>

通过 tabs 属性设置标签页数据，isDot 属性设置角标是否显示为圆点，scroll 属性设置是否可以滚动，alignLeft 属性设置当数据不满一屏时，item 项是否靠左对齐，默认均分铺满。

<!--nvue端，超出一屏滚动时scroll和alignLeft必须同为true-->
<wui-tabs :tabs="tabs" isDot scroll alignLeft></wui-tabs>

//数据格式二：name（必选）、badge（可选）、disabled（可选）为约定属性，其他属性可自行定义
tabs: [{
	//标签显示文本（String）
	name: '标签一'
}, {
	name: '标签二'
}, {
	name: '标签三',
	//角标（Number | String | Boolean），大于0的数或字符串则显示
	//isDot为true时可传true或false
	badge: 1
}, {
	name: '标签四'
}, {
	name: '标签五'
}, {
	name: '标签六'
}, {
	name: '标签七'
}, {
	name: '标签八',
	//是否禁用当前项（Boolean）
	disabled: true
}, {
	name: '标签九'
}]

//tabs 数据格式说明

//数据格式一，字符串数组
tabs: ['常用服务', '门诊服务', '住院服务', '特色服务']

//数据格式二，以下为约定属性，其他属性可自行增加
tabs: [{
	//（String）标签显示文本（必选）
	name: '标签一',
	//（String）标签显示图标src，图标尺寸默认为 40*40，单位rpx（可选）
	icon: '图标src',
	//（String）当前选项图标src（可选，不传默认使用icon）
	selectedIcon: '当前选项图标src',
	//（Number | String | Boolean）角标，大于0的数或字符串则显示（可选）
	//isDot为true时可传true或false
	badge:0,
	//（Boolean）角标是否显示为圆点（可选）
	isDot:false,
	//（Boolean）是否禁用当前项（可选）
	disabled: true
}]

Slots

插槽名称	说明
-	-

Props

属性名	类型	说明	默认值	平台差异说明
tabs	Array	标签页数据，具体格式见下方详细说明	[ ]	-
current	Number	当前选项卡索引	0	-
scroll	Boolean	标签页超出一屏是否可以滚动	false	-
height	Number,String	标签页高度，单位rpx	96	-
background	String	标签页背景色	#fff	-
size	Number,String	标签页字体大小	28	-
color	String	标签页字体颜色	#7F7F7F	非Nvue下默认值为空，可通过css变量（--wui-color-subtitle）改变字体颜色
fontWeight	Number, String	标签页选中前字重	normal	-
selectedSize	Number,String	标签页选中后字体大小	32	仅Nvue端生效，非Nvue端使用scale
selectedColor	String	标签页选中后字体颜色	#465CFF	非Nvue下默认值为空，可通过css变量（--wui-color-primary）改变字体颜色
selectedFontWeight	Number, String	标签页选中后字重	500	-
scale	Number, String	标签页选中后字体缩放倍数	1.2	Nvue端暂不支持，使用selectedSize属性代替
badgeColor	String	角标字体颜色	#fff	-
badgeBackground	String	角标背景颜色	#FF2B2B	非Nvue下默认值为空，可通过css变量（--wui-color-danger）改变背景颜色
isDot	Boolean	角标是否显示为圆点	false	-
isSlider	Boolean	是否显示底部滑块	true	-
sliderHeight	Number, String	滑块高度，单位rpx	5	-
sliderBackground	String	滑块背景颜色	#465CFF	非Nvue下默认值为空，可通过css变量（--wui-color-primary）改变背景颜色
sliderRadius	Number, String	滑块圆角值，单位rpx。值为-1时则使用滑块高度值	-1	-
padding	Number, String	滑块左右padding值，单位rpx	0	-
bottom	Number, String	滑块左右bottom值，单位rpx	0	-
short	Boolean	滑块是否固定为较短的长度45rpx	true	-
center	Boolean	滑块是否居中显示，默认居左显示	false	-
isFixed	Boolean	标签页是否固定在顶部	false	-
isSticky	Boolean	标签页吸顶效果，为true时isFixed失效	false	-
top	Number, String	isFixed或isSticky为true时，标签页top值，单位px	0	H5端默认值为44（默认导航栏的高度）
alignLeft	Boolean	当数据不满一屏时，item项是否靠左对齐，默认均分铺满	false	Nvue端，超出一屏滚动时scroll和alignLeft必须同为true
direction	Boolean	tabs item项内容排列方式，可选值：row、column。当设置为column时需调整height值	row	所有平台，有icon时生效
zIndex	Number, String	标签页z-index值，isFixed或isSticky为true时生效	996	Nvue端不支持，默认越靠后的元素层级越高，即将组件放置最底部

Events

事件名	说明	回调参数
@change	标签页切换时触发	{ index:当前标签页索引 ...tabs[index]:当前索引下标签页数据 }