< 文档首页
全部产品
弹性计算
存储服务
数据库
网络
视频与CDN
域名与网站
应用服务
工商财税 知识产权
互联网中间件
移动研发平台 EMAS
移动研发平台EMAS-专有云
云通信
安全
大数据
人工智能
ET大脑
物联网
物联网行业方案
数字金融
管理与监控
区块链
云市场
API与工具
解决方案
钉钉
会员服务
专有云
更多
云游戏

    纵向选项卡（vtabs）

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

    ★ 我的收藏
    本页目录

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

    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

    代码示例

    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. });
    上一篇：选项卡（tabs）
    下一篇：卡片（card）
    相关文档
    相关产品
    • 移动开发平台mPaaS
      移动开发平台（Mobile PaaS，简称 mPaaS）是源于支付宝 App 的移动开发平台，为移动开发、测试、运营及运维提供云到端的一站式解决方案，能有效降低技术门槛、减少研发成本、提升开发效率，协助企业快速搭建稳定高质量的移动 App。
    • 金融分布式架构 SOFAStack
      SOFAStack™（Scalable Open Financial Architecture Stack）包含构建金融级云原生架构所需的各个组件，也是在金融场景里锤炼出来的最佳实践。提供微服务应用开发、部署发布、监控运维、项目管理、容灾高可用等全栈式解决方案，并兼容Dubbo、Spring Cloud等微服务运行环境，提供基于虚拟机的经典PaaS运维和基于Kubernetes的云原生运维能力，助力客户各类应用轻松转型分布式和云原生架构。
    • 移动研发平台 EMAS
      移动研发平台（Enterprise Mobile Application Studio，简称EMAS），面向企业服务市场，期望把阿里巴巴近十年在移动互联网行业沉淀的DevOps研发支撑能力、移动App基础中间件能力开放给客户，帮助传统企业快速实现移动数字化的转型目标。