支付宝小程序扩展组件 纵向选项卡·Vtabs

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

扫码体验

示例代码

{
  "defaultTitle": "Vtabs",
  "usingComponents": {
    "vtabs": "mini-ali-ui/es/vtabs/index",
    "vtab-content": "mini-ali-ui/es/vtabs/vtab-content/index"
  }
}
 <vtabs
  tabs="{{tabs}}"
  onTabClick="handleChange"
  onChange="onChange"
  activeTab="{{activeTab}}"
  sameFontSize="{{false}}"
  tabBarlineShow="{{false}}"
>
  <block a:for="{{tabs}}">
    <vtab-content anchor="{{item.anchor}}">
      <view style="height: {{item.anchor === 'b'?'50vh':'100vh'}};background-color: {{item.anchor === 'b'?'#ccc':''}};">
        <text>content of {{item.title}}</text>
      </view>
    </vtab-content>
  </block>
</vtabs>
Page({
  data: {
    activeTab: 2,
    tabs: [
      { title: '选项二', anchor: 'a', number: '6' },
      { title: '选项', anchor: 'b', number: '66' },
      { title: '不超过五字', anchor: 'c', number: '99+' },
      { title: '选项四选项四选项四选项四', anchor: 'd' },
      { title: '选项五', anchor: 'e' },
      { title: '选项六', anchor: 'f' },
    ],
  },
  handleChange(index) {
    this.setData({
      activeTab: index,
    });
  },
  onChange(index) {
    this.setData({
      activeTab: index,
    });
  },
});

属性

vtabs 纵向选项卡包含了 <vtabs> 和 <vtab-content> 两部分。

vtabs

vtab-content

Bug & Tip

• tabs 数组中需要包含 vtab-content 中的 anchor；
• tabs 数组的数据格式：[{ title: '', anchor: '', number: '99+',},]。