VTabs 纵向选项卡

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

扫码体验

image.png

示例代码

{
  "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,
    });
  },
});

属性

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

vtab-content

视图内容

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