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

2020-09-18 11:19 更新

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

说明:

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

扫码体验

image

示例代码

{
 "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> 的属性进行配置

属性 类型 默认值 描述 必填 最低版本
className String - 自定义 class。 - -
activeCls String - 自定义激活 tabbar 的 class(设置字体样式和宽度)。 - -
tabs Array - tab 数据,其中包括选项标题 title、副标题(描述)文案 subTitle、胶囊形式 tab 中的数字 number,如需要以 badge 方式展示数字,添加 showBadge 并设置为 true 即可。 true 1.0.9 支持 showBadge
tabsName String - tab 选项卡的名字,与 activeTab 的 key 值相同 。 true -
activeTab Number 0 当前激活的 Tab 索引。 true -
tabBarCls String - tabbar的自定义样式 class。 - -
tabBarUnderlineColor String #1677FF 选中选项卡下划线颜色。 - -
tabBarActiveTextColor String #1677FF 选中选项卡字体颜色。 - -
capsuleTabBarActiveTextColor String #ffffff 胶囊选中选项卡字体颜色。 - -
capsuleTabBarBackgroundColor String #e5e5e5 胶囊未选中的背景色 - 1.0.12
tabBarInactiveTextColor String #333333 未选中选项卡字体颜色。 - -
tabBarSubTextColor String #999999 未选中描述字体颜色。 - -
tabBarActiveSubTextColor String #ffffff 选中描述字体颜色。 - -
tabBarBackgroundColor String #ffffff 选项卡背景颜色。 - -
showPlus Boolean false 是否显示 + icon。 - -
swipeable Boolean true tabs 内容区是否可拖动。 - -
animation Boolean true 选项卡切换时滑动动画。 - -
duration Number 500 tabs 内容区切换动画时长。 - -
capsule Boolean false 是否为胶囊 tab。 - -
hasSubTitle Boolean false 是否有副标题(描述)内容。 - -
elevator Boolean false 是否电梯组件。 - -
elevatorTop String 0px 电梯组件中 tab 置顶时的位置控制 - 1.0.8
elevatorContentTop Number 0 电梯组件中 tab-content 距离顶部的位置。 - 1.0.10
onPlusClick EventHandle () => {} + icon 被点击时的回调。 - -
onTabClick EventHandle (index: Number,tabsName:String) => void tab 被点击的回调。 - -
onChange EventHandle (index: Number,tabsName:String) => void tab 变化时触发。 - -
tabsName String - tab 选项卡的名字,与 activeTab 的 key 值相同。 true -
tabBarUnderlineWidth String 100% 设置 tab 选项卡选中态的下划线宽度 - 1.0.10
tabBarUnderlineHeight String 2px 设置 tab 选项卡选中态的下划线高度 - 1.0.10
onTabFirstShow EventHandle (index: Number, tabsName: String) => {} tab 选项卡首次出现时的回调 - 1.0.12
tabContentHeight String - 当 swipeable 为 true 时,可通过该属性值重设高度强制让 swiper 组件支持“自适应”高度的行为 - 1.1.2
plusIcon String add icon 类型可参考 am-icon 类型 - 1.1.4
plusIconSize Number 16 改变 icon 大小 - 1.1.4
plusIconColor String - 改变 icon 颜色 - 1.1.4
plusImg String - 使用图片替换 icon - 1.1.4
plusImgWidth String - 设置替换 icon 后的图片宽度 - 1.1.4
plusImgHeight String - 设置替换 icon 后的图片高度 - 1.1.4
stickyBar Boolean false tabBar 是否在页面滚动的时候定位在顶部的某个位置,可结合 elevatorTop 设置距离顶部的位置。 false 1.1.5

tab-content

属性 描述 类型 默认值
index 列表项的唯一索引。 String -
tabId tab 内容序列索引。 Number {{index}}
activeTab 选项卡当前激活序列索引。 Number {{activeTab}}
elevator 电梯组件时需要指定。 Boolean false

Bug & Tip

  • capsule 为 true 时,tab 选项卡显示为胶囊模式。
  • hasSubTitle 为 true 时,tabs 选项卡会显示带有描述的模式,但如果 tabs 数据中的 subTitle 为空,将不会显示描述文案。
  • 当 tabs 选项卡为胶囊模式时,会根据 tabs 数据中的 number 值显示数字。
  • elevatortrue,则为电梯组件,<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 的值为空时才可以使用 plusIconplusIconSize 以及 plusIconColor这三个值;
  • plusImg 的值为空时, plusImgWidthplusImgHeight 设置将无效;
  • 如果 plusIcon 为空, plusIconSizeplusIconColor 修改的是默认的 icon 大小以及颜色;

tab-content 高度自适应说明

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

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

扫描二维码

下载编程狮App

公众号
微信公众号

编程狮公众号