纵向选项卡（vtabs）

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

vtabs

属性名	类型	默认值	描述	必选
activeTab	Number	-	当前激活 tab 索引。	true
tabs	Array<title, anchor>	-	tab 数据，包括选项标题 title 和徽标类型 badgeType。其中，徽标类型分为圆点 dot 和文本 text。不设置 badgeType 则不显示徽标。徽标文本 badgeText 在 badgeType 为 text 时生效。	true
animated	Boolean	-	是否开启动画。	false
swipeable	Boolean	-	是否可滑动切换。	true
tabBarActiveBgColor	String	-	tabBar 激活状态背景色。	false
tabBarInactiveBgColor	String	-	tabBar 非激活状态背景色。	false
tabBarActiveTextColor	String	-	tabBar 激活 tab 文字颜色。	false
tabBarInactiveTextColor	String	-	tabBar 非激活 tab 文字颜色。	false
tabBarlineColor	String	-	tabBar 侧划线颜色。	false
onTabClick	(index: Number) => void	-	tab 被点击的回调。	false
onChange	(index: Number) => void	-	vtab-content 变化时触发。	false

vtab-content

视图内容

属性名	类型	默认值	描述	必选
anchor	String	-	列表唯一锚点值。	true

代码示例

{
  "defaultTitle": "小程序AntUI组件库",
  "usingComponents": {
    "vtabs": "mini-antui/es/vtabs/index",
    "vtab-content": "mini-antui/es/vtabs/vtab-content/index"
  }
}

<view>
  <vtabs
    tabs="{{tabs}}"
    onTabClick="handleChange"
    onChange="onChange"
    activeTab="{{activeTab}}"
  >
    <block a:for="{{tabs}}">
      <vtab-content anchor="{{item.anchor}}">
        <view style="border: 1px solid #eee; height: 800px; box-sizing: border-box">
          <text>content of {{item.title}}</text>
        </view>
      </vtab-content>
    </block>
  </vtabs>
</view>

Page({
  data: {
    activeTab: 2,
    tabs: [
      { title: '选项二', anchor: 'a', badgeType: 'dot' },
      { title: '选项', anchor: 'b', badgeType: 'text', badgeText: '新' },
      { title: '不超过五字', anchor: 'c' },
      { title: '选项四', anchor: 'd' },
      { title: '选项五', anchor: 'e' },
      { title: '选项六', anchor: 'f' },
    ],
  },
  handleChange(index) {
    this.setData({
      activeTab: index,
    });
  },
  onChange(index) {
    console.log('onChange', index);
    this.setData({
      activeTab: index,
    });
  },
});