文档中心 > 店铺动态卡片-开发指引

店铺动态卡片-开发指引

Tabs 选项卡

更新时间：2020/06/09 访问次数：4091

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

 

 

tabs

属性名 描述 类型 默认值 必选
className 自定义class String   false
activeCls 自定义激活tabbar的class String    
tabs tab数据，其中包括选项标题title，徽标类型badgeType分为圆点dot和文本text，不设置badgeType则不显示徽标。徽标文本badgeText在badgeType为text时生效 Array<title, badgeType, badgeText>   true
activeTab 当前激活Tab索引 Number   true
showPlus 是否显示‘+’icon Boolean false false
onPlusClick ‘+’icon被点击时的回调 () => {}   false
onTabClick tab 被点击的回调 (index: Number) => void   false
onChange tab变化时触发 (index: Number) => void   false
swipeable 是否可以滑动内容切换 Boolean true false
duration 当swipeable为true时滑动动画时长，单位ms Number 500(ms) false
tabBarBackgroundColor tabBar背景色 String   false
tabBarActiveTextColor tabBar激活Tab文字颜色 String   false
tabBarInactiveTextColor tabBar非激活Tab文字颜色 String   false
tabBarUnderlineColor tabBar下划线颜色 String   false
tabBarCls tabBar自定义样式class String   false

 

tab-content

 

视图内容

属性名 描述 类型 默认值 必选
index 列表项的唯一索引 String    

  

示例demo

 

 

示例

 

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

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<view>
  <tabs
    tabs="{{tabs}}"
    showPlus="{{true}}"
    onTabClick="handleTabClick"
    onChange="handleTabChange"
    onPlusClick="handlePlusClick"
    activeTab="{{activeTab}}"
  >
    <block a:for="{{tabs}}">
      <tab-content key="{{index}}">
        <view class="tab-content">content of {{item.title}}</view>
      </tab-content>
    </block>
  </tabs>
</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
25
26
27
28
29
30
31
32
33
34
Page({
  data: {
    tabs: [
      {
        title: '选项',
        badgeType: 'text',
        badgeText: '6',
      },
      {
        title: '选项二',
        badgeType: 'dot',
      },
      { title: '3 Tab' },
      { title: '4 Tab' },
      { title: '5 Tab' },
    ],
    activeTab: 2,
  },
  handleTabClick({ index }) {
    this.setData({
      activeTab: index,
    });
  },
  handleTabChange({ index }) {
    this.setData({
      activeTab: index,
    });
  },
  handlePlusClick() {
    my.alert({
      content: 'plus clicked',
    });
  },
});

 

1
2
3
4
5
6
.tab-content {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 300px;
}

 

FAQ

关于此文档暂时还没有FAQ
有用(0) 我要提问
返回
顶部
阿里巴巴集团 | 淘宝网 | 天猫 | 聚划算 | 全球速卖通 | 阿里巴巴国际交易市场 | 1688 | 阿里妈妈 | 阿里旅行·去啊 | 阿里云计算 | YunOS | 阿里通信 | 万网 | 高德 | 优视 | 友盟 | 酷盘 | 虾米 | 天天动听 | 来往 | 钉钉 | 11Main | 支付宝
关于淘宝 合作伙伴 营销中心 联系客服 开放平台 诚征英才 联系我们 网站地图 法律声明 © 2016 Taobao.com 版权所有
网络文化经营许可证：文网文[2010]040号 | 增值电信业务经营许可证：浙B2-20080224-1 | 信息网络传播视听节目许可证：1109364号