VTabs 纵向选项卡

用于让用户在不同的视图中进行切换。

扫码体验：
VTabs 纵向选项卡 - 图1

vtabs

属性名描述类型默认值必选
activeTab当前激活Tab索引Numbertrue
tabstab数据，其中包括选项标题title，列表唯一锚点值，以及徽标类型badgeType，分为圆点dot和文本text，不设置badgeType则不显示徽标。徽标文本badgeText在badgeType为text时生效Array<title, anchor>true
animated是否开启动画Booleanfalse
swipeable是否可滑动切换Booleantrue
tabBarActiveBgColortabBar激活状态背景色Stringfalse
tabBarInactiveBgColortabBar非激活状态背景色Stringfalse
tabBarActiveTextColortabBar激活Tab文字颜色Stringfalse
tabBarInactiveTextColortabBar非激活Tab文字颜色Stringfalse
tabBarlineColortabBar侧划线颜色Stringfalse
onTabClicktab 被点击的回调(index: Number) => voidfalse
onChangevtab-content变化时触发(index: Number) => voidfalse

vtab-content

视图内容

属性名描述类型默认值必选
anchor列表唯一锚点值Stringtrue

示例

  1. {
  2.   "defaultTitle": "小程序AntUI组件库",
  3.   "usingComponents": {
  4.     "vtabs": "mini-antui/es/vtabs/index",
  5.     "vtab-content": "mini-antui/es/vtabs/vtab-content/index"
  6.   }
  7. }
  1. <view>
  2.   <vtabs
  3.     tabs="{{tabs}}"
  4.     onTabClick="handleChange"
  5.     onChange="onChange"
  6.     activeTab="{{activeTab}}"
  7.   >
  8.     <block a:for="{{tabs}}">
  9.       <vtab-content anchor="{{item.anchor}}">
  10.         <view style="border: 1px solid #eee; height: 800px; box-sizing: border-box">
  11.           <text>content of {{item.title}}</text>
  12.         </view>
  13.       </vtab-content>
  14.     </block>
  15.   </vtabs>
  16. </view>
  1. Page({
  2.   data: {
  3.     activeTab: 2,
  4.     tabs: [
  5.       { title: '选项二', anchor: 'a', badgeType: 'dot' },
  6.       { title: '选项', anchor: 'b', badgeType: 'text', badgeText: '新' },
  7.       { title: '不超过五字', anchor: 'c' },
  8.       { title: '选项四', anchor: 'd' },
  9.       { title: '选项五', anchor: 'e' },
  10.       { title: '选项六', anchor: 'f' },
  11.     ],
  12.   },
  13.   handleChange(index) {
  14.     this.setData({
  15.       activeTab: index,
  16.     });
  17.   },
  18.   onChange(index) {
  19.     console.log('onChange', index);
  20.     this.setData({
  21.       activeTab: index,
  22.     });
  23.   },
  24. });

原文: https://docs.alipay.com/mini/component-ext/vtabs