淘宝开放平台

登录
文档中心 > 自研小程序-开发指引

自研小程序-开发指引

VTabs 纵向选项卡

更新时间：2020/06/24 访问次数：2197

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

 

 

vtabs

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

 

vtab-content

 

视图内容

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

  

Demo示例

 

示例

 

1
2
3
4
5
6
7
{
  "defaultTitle": "应用AntUI组件库",
  "usingComponents": {
    "vtabs": "mini-antui/es/vtabs/index",
    "vtab-content": "mini-antui/es/vtabs/vtab-content/index"
  }
}

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<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>

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
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,
    });
  },
});

 

FAQ

关于此文档暂时还没有FAQ
有用(0) 我要提问
返回
顶部