全部产品

Tabs 横向选项卡

应用当需要展示二级以下内容时,屏幕顶部会展示一个标签栏,并提供在应用的不同部分之间快速切换的功能。标签栏在所有屏幕方向上保持相同的高度。选项:根据业务场景需要可以设定2个以上选项,当选项超过屏幕宽度后可以横滑选项行查看所有内容。新内容标记:选项卡上能显示未读或者新内容标记。场景描述:当选项卡内容提供给用户自定义配置时提供编辑/新建入口,用户可以由此进入编辑页面进行修改。

说明:

  • 通过触发 onChange 事件,设置 setData 对应的数据,从而切换页面上的 tabs 数据。
  • 可使用 my.request 传数据给后端。

扫码体验

image.png

示例代码

{
  "defaultTitle": "小程序AntUI组件库",
  "usingComponents": {
    "tabs": "mini-antui/es/tabs/index",
    "tab-content": "mini-antui/es/tabs/tab-content/index"
  }
}

<view>
  <tabs
    tabs="{{tabs}}"
    showPlus="{{true}}"
    onTabClick="handleTabClick"
    onChange="handleTabChange"
    onPlusClick="handlePlusClick"
    activeTab="{{activeTab}}"
    swipeable="{{false}}"
  >
    <block a:for="{{tabs}}">
      <tab-content key="{{index}}" tabId="{{index}}" activeTab="{{activeTab}}" a:if="{{index === 1}}">
        <view class="tab-content" style="height: 100px;">高度为 100px {{item.title}}</view>
      </tab-content>
      <tab-content key="{{index}}" tabId="{{index}}" activeTab="{{activeTab}}" a:elif="{{index === 2}}">
        <view class="tab-content" style="height: 200px;">改变 tab-content 高度为 200px {{item.title}}</view>
      </tab-content>
      <tab-content key="{{index}}" tabId="{{index}}" activeTab="{{activeTab}}" a:else>
        <view class="tab-content">content of {{item.title}}</view>
      </tab-content>
    </block>
  </tabs>
</view>

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',
    });
  },
});

.tab-content {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 40rpx;
  /* 如果 swipeable="{{true}}",需要增加 height */
  /* height: 350px; */
}

属性

属性名描述类型默认值必填
className自定义 class。String-
activeCls自定义激活 tabbar 的 class(设置字体样式和宽度)。String--
tabstab数据,其中包括选项标题title,徽标类型badgeType分为圆点dot和文本text,不设置badgeType则不显示徽标。徽标文本badgeTextbadgeTypetext时生效。Array<title, badgeType, badgeText>-
activeTab当前激活 Tab 索引。Number-
showPlus是否显示 ‘+’icon。Booleanfalse
onPlusClick‘+’icon 被点击时的回调。() => {}-
onTabClicktab 被点击的回调。(index: Number) => void-
onChangetab 变化时触发。(index: Number) => void-
swipeable是否可以滑动内容切换,同时可控制高度是否自适应。Booleantrue
duration当 swipeable 为 true 时滑动动画时长,单位 ms。Number500(ms)
tabBarBackgroundColortabBar 背景色。String-
tabBarActiveTextColortabBar 激活 Tab 文字颜色。String-
tabBarInactiveTextColortabBar 非激活 Tab 文字颜色。String-
tabBarUnderlineColortabBar 下划线颜色。String-
tabBarClstabBar 自定义样式 class(样式中需将 background-color/color/width 排除)。String-

tab-content

视图内容

属性名描述类型默认值
index列表项的唯一索引。String-
tabIdtab 内容序列索引。Number{{index}}
activeTab选项卡当前激活序列索引。Number{{activeTab}}

tab-content 高度自适应说明

tabs 组件内容区域高度是否能够自适应,需要注意 swipeable 的值:

  • swipeable='{{true}}':内容区域可滑动,且相对应 tab 标签卡;但内容区域高度为固定值,需要在 acss 文件中设定 height 值,否则高度会异常;
  • swipeable='{{false}}':内容区域不可滑动,此时高度表现形式有两种,且可以不需要在 acss 文件设定 height 值;