#
标签页 Tabs

选项卡切换组件

标签页需tabstabpanel两个组件关联使用。

tabpanel用于设置每一个标签的名称、以及标签下对应的内容;

tabs 包裹在所有tabpanel最外层,tabs下的所有tabpanel属于同一个标签页。

WARNING

为便于下文的说明,在这里约定以下定义:

  • 标签栏 :标签页顶部,可点击切换的区域;
  • 标签栏装饰线 : 标签栏灰色的线;
  • 标签选中时装饰线 : 选中状态下标签栏下面蓝色的线

# 等宽标签

默认为等宽标签,在 tabs 上设置 equal-width="false" 时,取消等宽标签,此时宽度为 文本内容 + 左右各20rpx的padding;

默认激活的是第一个标签页,通过tabs组件上设置active-key="{\{key}}"配置初始状态时激活的选项卡。

当标签数过多时可在 tabs 上设置 scrollable="true" 开启滚动标签栏。

必须在 tabpanel 组件中传入 tabkeyslot 属性,其中:

  • tab 是标签栏显示的文字;

  • key 为每个标签栏的标识,对应 tabs 中的 active-key

  • 受小程序的限制,必须传属性 slot 且值的内容与 key 保持一致;

  • tabpanel 标签中包裹的内容为标签栏对应的内容。

# 示例代码

      <l-tabs bind:linchange="changeTabs">
        <l-tabpanel tab="京东物流" key="one" slot="one">
          <view class="tab-content">京东物流</view>
        </l-tabpanel>
        <l-tabpanel tab="品牌" key="two" slot="two">
          <view class="tab-content">品牌</view>
        </l-tabpanel>
        <l-tabpanel tab="接口" key="three" slot="three">
          <view class="tab-content">接口</view>
        </l-tabpanel>
        <l-tabpanel tab="面板" key="four" slot="four">
          <view class="tab-content">面板</view>
        </l-tabpanel>
      </l-tabs>

默认

# 标签页位置

默认标签栏位置在顶部,可通过在 tabs 上设置 placement 属性切换标签栏位置,可选值有 top/left/right/bottom

# 标签动画

tabs 上设置 animated="true" 开启标签页切换动画,默认不开启。

# 滑动切换标签

tabs 设置swipeable="true" 时,支持滑动内容部分切换标签。

注意事项

# 图标标签

tabpanel上设置icon时,可以在标签栏上添加图标,默认图标大小为28rpx,颜色与字体颜色一致。

通过在tabpanel上设置icon属性设置每个标签页显示图标类型,可配置图标类型同Icon组件一致,

# 图片资源

使用image配置图片资源的样式,可配置项有:

  • defaultImage :未选中时的图片资源,
  • activeImage :选中时的图片资源
  • picPlacement 可以更改图片、图标的相对于文字的位置,默认为 top

# 标签初始样式

  • 标签栏位置在顶部和底部时的默认高度为 80rpx ,宽度等分,开启 scrollable 时,最小宽度为 160rpx;
  • 标签栏位置在左边或右边时,默认宽度为 160rpx,高度等分,开启 scrollable 时,最小高度为 80rpx;
  • 可通过 l-header-classl-active-classl-inactive-class 覆盖默认标签栏样式。

注意:

  • 标签栏选中时装饰线的样式默认为:
    • background:#333333;
    • width/height: 4rpx;
  • 在覆盖标签栏选中时装饰线的样式,通过修改以上属性来覆盖修改。

# 标签属性 (Tabs Attributes)

参数 说明 类型 可选值 默认值
active-key 默认激活tabs的key String - 默认为第一个
placement 标签位置 String top/left/right/bottom top
animated 是否使用动画切换标签 Boolean false
animated-for-line 是否使用动画切换装饰线 Boolean false
swipeable 是否支持滑动切换标签 Boolean false
scrollable 是否滚动标签栏 Boolean false -
active-color 设置激活状态标签的文本和图标颜色 String 表示颜色的是16进制 -
inactive-color 设置未激活状态标签的文本和颜色 String 表示颜色的是16进制 -
has-line 设置是否显示标签下的装饰线 Boolean - true
content-height 内容区域高度 Number - -

# 标签外部样式类(Tabs ExternalClasses)

外部样式类名 说明 备注
l-header-class 外部样式类,覆盖标签栏整体样式 替代l-class-header
l-active-class 外部样式类,覆盖标签激活状态样式 替代l-class-active
l-inactive-class 外部样式类,覆盖标签默认状态样式 替代l-class-inactive
l-line-class 外部样式类,覆盖标签选中时装饰线的样式 替代l-class-line
l-header-line-class 外部样式类,覆盖标签栏装饰线的样式 替代l-class-header-line
l-tabimage-class 外部样式类,覆盖标签图片的样式 替代l-class-tabimage
l-content-class 外部样式类,覆盖标签内容样式 替代l-class-content

# 已经弃用的外部样式类

以下这些外部样式类已经停止支持,将在未来的某个版本中去除,请使用上方的外部样式类替代。

外部样式类名 说明 备注
l-class-header 外部样式类,覆盖标签栏整体样式 请使用l-header-class替代
l-class-active 外部样式类,覆盖标签激活状态样式 请使用l-active-class替代
l-class-inactive 外部样式类,覆盖标签默认状态样式 请使用l-inactive-class替代
l-class-line 外部样式类,覆盖标签选中时装饰线的样式 请使用l-line-class替代
l-class-header-line 外部样式类,覆盖标签栏装饰线的样式 请使用l-header-line-class替代
l-class-tabimage 外部样式类,覆盖标签图片的样式 请使用l-tabimage-class替代
l-class-content 外部样式类,覆盖标签内容样式 请使用l-content-class替代

# 标签页属性 (tabpanel Attributes)

参数 说明 类型 可选值 默认值
key 对应 active-key,必填 String - -
tab 选项卡头显示文字 String - -
sub-key 混合选项卡时,选项卡竖向key String - -
sub-tab 混合选项卡时,选项卡竖向显示文字 String - -
slot key一致,有sub-key时则与sub-key保持一致,必填 String - -
icon 设置标签栏图标类型 String - -
icon-size 设置标签栏图标的大小 String - 28
picPlacement 设置图片、图标的相对于文字的位置 String top/left/right/bottom top
image 设置标签栏图片资源 Object {activeImage,defaultImage} -

# 标签页事件 (Tabs Events)

事件名称 说明 返回值 备注
bind:linchange tab切换的回调事件 当前激活标签页的key -