Tabs 选项卡

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

扫码体验：
Tabs 选项卡 - 图1

tabs

属性名描述类型默认值必选
className自定义classStringfalse
activeCls自定义激活tabbar的classString
tabstab数据，其中包括选项标题title，徽标类型badgeType分为圆点dot和文本text，不设置badgeType则不显示徽标。徽标文本badgeText在badgeType为text时生效Array<title, badgeType, badgeText>true
activeTab当前激活Tab索引Numbertrue
showPlus是否显示‘+’iconBooleanfalsefalse
onPlusClick‘+’icon被点击时的回调() => {}false
onTabClicktab 被点击的回调(index: Number) => voidfalse
onChangetab变化时触发(index: Number) => voidfalse
swipeable是否可以滑动内容切换Booleantruefalse
duration当swipeable为true时滑动动画时长，单位msNumber500(ms)false
tabBarBackgroundColortabBar背景色Stringfalse
tabBarActiveTextColortabBar激活Tab文字颜色Stringfalse
tabBarInactiveTextColortabBar非激活Tab文字颜色Stringfalse
tabBarUnderlineColortabBar下划线颜色Stringfalse
tabBarClstabBar自定义样式classStringfalse

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. }

原文: https://docs.alipay.com/mini/component-ext/tabs