全部产品

选项卡(tabs)

选项卡(tabs)可让用户在不同的视图中进行切换。

说明:选项卡组件不支持 tab 页面中的内容对屏幕尺寸进行自适应。

tabs

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

tab-content

视图内容

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

代码示例

   
  1. {
  2. "defaultTitle": "小程序 AntUI 组件库",
  3. "usingComponents": {
  4. "tabs": "mini-antui/es/tabs/index",
  5. "tab-content": "mini-antui/es/tabs/tab-content/index"
  6. }
  7. }
   
  1. <view>
  2. <tabs
  3. tabs="{{tabs}}"
  4. showPlus="{{true}}"
  5. onTabClick="handleTabClick"
  6. onChange="handleTabChange"
  7. onPlusClick="handlePlusClick"
  8. activeTab="{{activeTab}}"
  9. >
  10. <block a:for="{{tabs}}">
  11. <tab-content key="{{index}}">
  12. <view class="tab-content">content of {{item.title}}</view>
  13. </tab-content>
  14. </block>
  15. </tabs>
  16. </view>
   
  1. Page({
  2. data: {
  3. tabs: [
  4. {
  5. title: '选项',
  6. badgeType: 'text',
  7. badgeText: '6',
  8. },
  9. {
  10. title: '选项二',
  11. badgeType: 'dot',
  12. },
  13. { title: '3 Tab' },
  14. { title: '4 Tab' },
  15. { title: '5 Tab' },
  16. ],
  17. activeTab: 2,
  18. },
  19. handleTabClick({ index }) {
  20. this.setData({
  21. activeTab: index,
  22. });
  23. },
  24. handleTabChange({ index }) {
  25. this.setData({
  26. activeTab: index,
  27. });
  28. },
  29. handlePlusClick() {
  30. my.alert({
  31. content: 'plus clicked',
  32. });
  33. },
  34. });
   
  1. .tab-content {
  2. display: flex;
  3. justify-content: center;
  4. align-items: center;
  5. height: 300px;
  6. }