全部产品

纵向选项卡(vtabs)

更新时间:2021-04-21 10:28:14

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

vtabs

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