支付宝小程序扩展组件 横向选项卡·Tabs

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

说明：

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

扫码体验

示例代码

{
 "defaultTitle": "Tabs 横向选项卡",
 "usingComponents": {
   "tabs": "mini-ali-ui/es/tabs/index",
   "tab-content": "mini-ali-ui/es/tabs/tab-content/index"
 }
}
<tabs
  tabs="{{tabs2}}"
  tabsName="activeTab2"
  onTabClick="handleTabClick"
  onChange="handleTabChange"
  onPlusClick="handlePlusClick"
  activeTab="{{activeTab2}}"
  showPlus="{{true}}"
  capsule="{{false}}"
  hasSubTitle="{{false}}"
  tabBarUnderlineWidth="20px"
  stickyBar="{{true}}"
>
  <block a:for="{{tabs2}}">
    <tab-content key="{{index}}" tabId="{{index}}" activeTab="{{activeTab2}}" a:if="{{index === 0}}">
      <view class="tab-content" style="height: 300px;">高度为 300px {{item.title}}</view>
    </tab-content>
    <tab-content key="{{index}}" tabId="{{index}}" activeTab="{{activeTab2}}" 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="{{activeTab2}}" a:else>
      <view class="tab-content">content of {{item.title}}</view>
    </tab-content>
  </block>
</tabs>

Page({
  data: {
    tabs2: [
      {
        title: '选项',
        subTitle: '描述文案',
        number: '66',
        showBadge: true,
        badge: {
          arrow: false,
          stroke: true,
        },
      },
      {
        title: '选选',
        subTitle: '描述文案',
        number: '文字',
        showBadge: true,
        badge: {
          arrow: true,
        },
      },
      {
        title: '二二',
        subTitle: '描述文案',
        showBadge: true,
        number: 0,
      },
      {
        title: '选二',
        subTitle: '描述文案',
        number: '99+',
        showBadge: false,
      },
      {
        title: '项二',
        subTitle: '描述文案',
        number: '6',
      },
      {
        title: '二二',
        subTitle: '描述文案',
      },
      {
        title: '选二',
        subTitle: '描述文案',
      },
      {
        title: '项二',
        subTitle: '描述文案',
        number: '6',
      },
    ],
    activeTab2: 0,
  },
  handleTabClick({ index, tabsName }) {
    this.setData({
      [tabsName]: index,
    });
  },
  handleTabChange({ index, tabsName }) {
    this.setData({
      [tabsName]: index,
    });
  },
  handlePlusClick() {
    my.alert({
      content: 'plus clicked',
    });
  },
  onPageScroll({ scrollTop }) {
    // onPageScroll 主要是用于电梯组件（elevator 模式）滚动时的高度计算；
    // activeTab 被触发高亮的 tab；
    // getFloorNumber 当前 tab-content 所在的索引值；
    // this.data.floorNumber 将会有组件内部根据 tab-content 的高度计算；
    // ※※※ 当使用 elevator 模式的 tabs 组件时，这部分的代码请直接 copy 使用 ※※※
    if (scrollTop === 0) {
      this.setData({
        activeTab: 0,
        getFloorNumber: 0,
      });
    } else {
      // 电梯组件时需要添加，计算页面滚动时，tab 的切换；
      for (let i = 0; i <= this.data.floorNumber.length; i++) {
        if (scrollTop >= this.data.floorNumber[i]) {
          this.setData({
            activeTab: i,
            getFloorNumber: i,
          });
        }
      }
    }
  },
});

.tab-content {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 40rpx;
  box-sizing: border-box;
  /* 如果 swipeable="{{true}}"，需要增加 height */
  /* height: 350px; */
  /* 为了体现 stickyBar 的作用而增加的 tab-content 的高度 */
  height: 100vh;
}

属性

tabs 横向选项卡主要是由 <tabs> 和 <tab-content> 两个标签组成，包含的类型较多，可通过 <tabs> 的属性进行配置

tab-content

Bug & Tip

• capsule 为 true 时，tab 选项卡显示为胶囊模式。
• hasSubTitle 为 true 时，tabs 选项卡会显示带有描述的模式，但如果 tabs 数据中的 subTitle 为空，将不会显示描述文案。
• 当 tabs 选项卡为胶囊模式时，会根据 tabs 数据中的 number 值显示数字。
• 如 elevator 为 true，则为电梯组件，<tab-content> 将竖排展示，自动计算每个 <tab-content> 的坐标后，根据索引值定位指向；
  • 在 elevator 模式中，this.data.floorNumber 将会根据所有 tab-content 的高度计算所得，无需修改；
  • 电梯组件需要考虑页面滚动时判断每个 tab-content 的位置，因此需要在页面级别中加入 onPageScroll({ scrollTop }) {}，具体可参考代码示例中的代码；
• tabsName 是为了能更好获取到当前 tab 选项卡的名称进行识别，值需要与 activeTab 的 key 值相同，如：activeTab="{{activeTab2}}"，那么 tabsName="activeTab2"。
• tabs 中的 showBadge 为 true 时，number 中的值会以 badge 形式展示，并且不受 tab 类型影响，否则 number 中的值仅在胶囊 tab 中有效；
  • 可同时添加 badge: { arrow: true, stroke: true, } 控制 badge 的样式；
  • arrow 可展示有箭头的 badge，箭头仅有左方向；
  • stroke 可展示有描边的 badge；
• 当 elevatorTop 的值为 px 单位时，elevatorContentTop 距离顶部的高度则是 elevatorTop + tab 选项卡的高度；
• 当 plusImg 的值为空时才可以使用 plusIcon、 plusIconSize 以及 plusIconColor这三个值；
• 当 plusImg 的值为空时， plusImgWidth 和 plusImgHeight 设置将无效；
• 如果 plusIcon 为空， plusIconSize 和 plusIconColor 修改的是默认的 icon 大小以及颜色；

tab-content 高度自适应说明

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

• swipeable='{{true}}'：内容区域可滑动，且相对应 tab 标签卡；但内容区域高度为固定值，需要在 acss 文件中设定 height 值，否则高度会异常；如需要自适应高度的话，那么请使用 tabContentHeight 重设高度，实现方法：点击不同 tab 标签卡，获取当前 tab-content 的高度，赋值给 tabContentHeight 即可；
• swipeable='{{false}}'：内容区域不可滑动，此时高度表现形式有两种，且可以不需要在 acss 文件设定 height 值：
  • <tab-content> 中无 tabId 和 activeTab 两个属性，此时的高度将以所有内容区域中最高的为基准展示；
  • <tab-content> 中包含 tabId 和 activeTab 两个属性时 tabId="{{index}}" activeTab="{{activeTab}}"，内容区域所展示的高度将会随着不同模块的高度而改变。