Vtabs 纵向选项卡

左侧显示分类，右侧显示对应内容，可启用列表滚动联动。

支持平台

以下为官网文档所列的平台支持情况，具体功能及版本限制请参见本页的平台说明。

App-vue	App-nvue	微信小程序	支付宝小程序	百度小程序	字节小程序	QQ小程序	H5	PC	快手小程序	钉钉小程序
✓	✓	✓	✓	✓	✓	✓	✓	✓	✓	✓

基础用法

<!-- 纵向选项卡 -->
<fui-vtabs :vtabs="[{ name: '分类一' }, { name: '分类二' }]">
  <!-- 第一项内容 -->
  <fui-vtabs-content :tabIndex="0"><text>分类一内容</text></fui-vtabs-content>
  <!-- 第二项内容 -->
  <fui-vtabs-content :tabIndex="1"><text>分类二内容</text></fui-vtabs-content>
</fui-vtabs>

属性

属性	类型	说明	官网默认值
vtabs	Array	选项卡数据	[]
nameKey	String	名称字段	name
badgeKey	String	角标字段	badge
iconKey	String	默认图标字段	icon
activeIconKey	String	选中图标字段	activeIcon
width	Number / String	容器宽度，0 使用屏幕宽度，设置时需带单位	'0'
height	Number / String	容器高度，0 使用屏幕高度，设置时需带单位	'0'
tabWidth	Number / String	菜单项宽度，单位 rpx	220
tabHeight	Number / String	菜单项高度，单位 rpx	110
size	Number / String	默认字号，单位 rpx	26
activeSize	Number / String	选中字号，单位 rpx	26
color	String	默认文字颜色	#333333
activeColor	String	选中文字颜色	#465CFF
fontWeight	Number / String	默认字重	normal
activeFontWeight	Number / String	选中字重	normal
background	String	菜单项背景色	#eeeeee
activeBgColor	String	选中背景色	#ffffff
isBorder	Boolean	是否显示左侧选中边框	true
borderColor	String	选中边框色	#465CFF
activeTab	Number / String	初始选项卡索引	0
animation	Boolean	联动滚动是否启用动画	true
badgeColor	String	角标文字颜色	#fff
badgeBackground	String	角标背景色	#FF2B2B
isDot	Boolean	角标是否显示为圆点	false
linkage	Boolean	菜单和内容是否联动	true

内容组件

fui-vtabs-content 的 tabIndex 为 Number / String，官网默认值为 0；联动模式下应为每个内容组件传入对应索引。其默认插槽用于放置内容。

事件

事件	说明	回调参数
click	点击选项卡	包含 index 和当前选项字段的对象
change	联动滚动时选项卡变化	包含 index 和当前选项字段的对象
scrolltolower	非联动模式下内容滚动到底部	滚动事件

非 nvue 的主色及角标背景由主题变量控制。

插槽

插槽	说明
default	放置纵向选项卡内容组件