SideMenu 纵向选项卡，用于让用户在不同的视图中进行切换。

支持平台

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

选项卡-联动

通过 vtabs 属性设置选项卡数据，activeTab 属性设置默认选中项。

<wui-vtabs :vtabs="vtabs" :activeTab="activeTab"  ref="vtabsRef" @click="onTabClick" @change="onChange">
<!--注意：联动时，tabIndex属性为必传参数-->
<wui-vtabs-content v-for="(item,index) in vtabs" :key="index" :tabIndex="index">
  <view class="wui-vtabs-content__item" :style="{paddingBottom:vtabs.length-1===index?'800px':'0'}">
    <view class="wui-content--box">
      <text class="wui-title">{{item.title || item.name}}</text>
      <image class="wui-img" :src="item.img" mode="widthFix"></image>
      <text class="wui-descr">{{item.descr}}</text>
    </view>
  </view>
</wui-vtabs-content>
</wui-vtabs>

  const activeTab = ref<any>(0);
const vtabsRef = ref<any>('');
  const vtabs = ref<any>([
    {
      name: '孕期团课',
      title: '孕期团课',
      icon: 'https://gjwlyy-specialdisease.oss-cn-hangzhou.aliyuncs.com/prileImg/1654595877804_.png',
      descr:
        '自定义内容自定义内容自定义内容自定义内容自定义内容自定义内容自定义内容自定义内容自定义内容',
    },
    {
      name: '孕期团课1',
      title: '孕期团课1',
      descr:
        '自定义内容自定义内容自定义内容自定义内容自定义内容自定义内容自定义内容自定义内容自定义内容',
    },
    {
      name: '孕期团课2',
      title: '孕期团课2',
      descr:
        '自定义内容自定义内容自定义内容自定义内容自定义内容自定义内容自定义内容自定义内容自定义内容',
      badge: 1,
    },
    {
      name: '孕期团课3',
      title: '孕期团课3',
      descr:
        '自定义内容自定义内容自定义内容自定义内容自定义内容自定义内容自定义内容自定义内容自定义内容',
    },
    {
      name: '孕期团课4',
      title: '孕期团课4',
      descr:
        '自定义内容自定义内容自定义内容自定义内容自定义内容自定义内容自定义内容自定义内容自定义内容',
    },
    {
      name: '孕期团课5',
      title: '孕期团课5',
      descr:
        '自定义内容自定义内容自定义内容自定义内容自定义内容自定义内容自定义内容自定义内容自定义内容',
    },
    {
      name: '孕期团课6',
      title: '孕期团课6',
      descr:
        '自定义内容自定义内容自定义内容自定义内容自定义内容自定义内容自定义内容自定义内容自定义内容',
    },
  ]);
onLoad(() => {
    nextTick(() => {
        setTimeout(() => {
            vtabsRef.value.reset();
        }, 200);
    });
    getTopHeight();
});
const onTabClick = (e: any) => {
    const index = e.index;
    console.log('tabClick', index);
};
const onChange = e => {
    const index = e.index;
    console.log('change', index);
};

page {
  background: #fff;
  font-weight: normal;
}

.wui-vtabs-content__item {
  width: 100%;
  /* padding: 0 20rpx; */
  box-sizing: border-box;
  overflow: hidden;
}

.wui-img {
  width: 100%;
  height: 268rpx;
  display: block;
  margin-top: 24rpx;
}

.wui-content--box {
  width: 100%;
  padding: 30rpx 24rpx 40rpx;
  box-sizing: border-box;
}

.wui-title {
  display: block;
  font-size: 32rpx;
  font-weight: bold;
}

.wui-descr {
  display: block;
  font-size: 24rpx;
  padding-top: 24rpx;
}

//vtabs 选项卡数据属性说明，以下属性为约定属性，可自行新增其他属性

[{
	//选项卡item项文本
	name: 'WlyyUI',
	//选项卡item项图标地址，可选
	icon: 'xxxxxx/logo.png',
	//选项卡item项选中时图标地址，可选
	activeIcon:'',
	//选项卡item项图标宽度，单位rpx，可选
	iconWidth:40,
	//选项卡item项图标高度，单位rpx，可选
	iconHeight:40,
	//选项卡item项角标，数值大于0才会显示，可选
	badge: 0,
	//选项卡item项是否禁用点击，可选
	disable:false
}]

Slots

wui-vtabs 组件

插槽名称	说明
default	选项卡数据，由多个 wui-vtabs-content 组件组成

wui-vtabs-content 组件

插槽名称	说明
default	选项卡数据内容

Props

wui-vtabs 组件

属性名	类型	说明	默认值	平台差异说明
vtabs	Array	选项卡数据，具体格式见下方详细说明	[ ]	-
width	Number, String	选项卡宽度，为0时默认使用屏幕宽度，注：传值时自行加上单位,如：750rpx	'0'	-
height	Number, String	选项卡高度，为0时默认使用屏幕高度，注：传值时自行加上单位,如：600rpx	'0'	-
tabWidth	Number, String	选项卡菜单item项宽度，单位rpx	220	-
tabHeight	Number, String	选项卡菜单item项高度，单位rpx	110	-
size	Number, String	选项卡菜单item项字体大小，单位rpx	26	-
activeSize	Number, String	选项卡菜单item项选中时字体大小，单位rpx	26	-
color	String	选项卡菜单item项字体颜色	#333333	-
activeColor	String	选项卡菜单item项选中时字体颜色	#465CFF	非Nvue端默认为空，可使用css变量（--wui-color-primary）改变颜色
fontWeight	Number, String	选项卡菜单item项字重	normal	-
activeFontWeight	Number, String	选项卡菜单item项选中时字重	normal	-
background	String	选项卡菜单item项背景色	#eeeeee	-
activeBgColor	String	选项卡菜单item项选中时背景色	#ffffff	-
isBorder	Boolean	是否显示选项卡菜单item项左侧边框	true	-
borderColor	String	示选项卡菜单item项选中时左侧边框颜色	#465CFF	非Nvue端默认为空，可使用css变量（--wui-color-primary）改变颜色
activeTab	Number, String	初始化显示tab项索引	0	-
animation	Boolean	选项卡联动时内容滚动是否有动画效果	true	-
badgeColor	String	选项卡菜单item项角标字体颜色	#fff	-
badgeBackground	String	选项卡菜单item项角标背景颜色	#FF2B2B	非Nvue端默认为空，可使用css变量（--wui-color-danger）改变颜色
isDot	Boolean	角标是否显示为圆点，vtabs 中 badge数值大于0时才会显示	false	-
linkage	Boolean	是否联动，为false时content只需展示对应索引数据	true	-

wui-vtabs-content 组件

属性名	类型	说明	默认值	平台差异说明
tabIndex	Number, String	当前内容所在选项卡索引值，联动时必传	0	-

Events

wui-vtabs 组件

事件名	说明	回调参数
@click	点击选项卡时触发	{ index:当前选项卡索引 ...vtabs[index]:当前索引下数据 }
@change	滚动内容时触发，联动时有效	{ index:当前选项卡索引 ...vtabs[index]:当前索引下数据 }