支付寶小程序擴展組件 縱向選項卡·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 數(shù)組中需要包含 vtab-content 中的 anchor；
• tabs 數(shù)組的數(shù)據(jù)格式：[{ title: '', anchor: '', number: '99+',},]。