全部产品

纵向选项卡(vtabs)

更新时间:2019-09-09 14:07:26

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

vtabs

属性名 描述 类型 默认值 必选
activeTab 当前激活Tab索引 Number - true
tabs tab数据,其中包括选项标题 title,列表唯一锚点值,以及徽标类型 badgeType,分为圆点 dot 和文本 text,不设置 badgeType 则不显示徽标。徽标文本 badgeTextbadgeTypetext 时生效。 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

代码示例

  1. {
  2. "defaultTitle": "小程序AntUI组件库",
  3. "usingComponents": {
  4. "vtabs": "mini-antui/es/vtabs/index",
  5. "vtab-content": "mini-antui/es/vtabs/vtab-content/index"
  6. }
  7. }
  1. <view>
  2. <vtabs
  3. tabs="{{tabs}}"
  4. onTabClick="handleChange"
  5. onChange="onChange"
  6. activeTab="{{activeTab}}"
  7. >
  8. <block a:for="{{tabs}}">
  9. <vtab-content anchor="{{item.anchor}}">
  10. <view style="border: 1px solid #eee; height: 800px; box-sizing: border-box">
  11. <text>content of {{item.title}}</text>
  12. </view>
  13. </vtab-content>
  14. </block>
  15. </vtabs>
  16. </view>
  1. Page({
  2. data: {
  3. activeTab: 2,
  4. tabs: [
  5. { title: '选项二', anchor: 'a', badgeType: 'dot' },
  6. { title: '选项', anchor: 'b', badgeType: 'text', badgeText: '新' },
  7. { title: '不超过五字', anchor: 'c' },
  8. { title: '选项四', anchor: 'd' },
  9. { title: '选项五', anchor: 'e' },
  10. { title: '选项六', anchor: 'f' },
  11. ],
  12. },
  13. handleChange(index) {
  14. this.setData({
  15. activeTab: index,
  16. });
  17. },
  18. onChange(index) {
  19. console.log('onChange', index);
  20. this.setData({
  21. activeTab: index,
  22. });
  23. },
  24. });