标签页 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 标签中包裹的内容为标签栏对应的内容。

示例代码

  1. <l-tabs bind:linchange="changeTabs">
  2. <l-tabpanel tab="京东物流" key="one" slot="one">
  3. <view class="tab-content">京东物流</view>
  4. </l-tabpanel>
  5. <l-tabpanel tab="品牌" key="two" slot="two">
  6. <view class="tab-content">品牌</view>
  7. </l-tabpanel>
  8. <l-tabpanel tab="接口" key="three" slot="three">
  9. <view class="tab-content">接口</view>
  10. </l-tabpanel>
  11. <l-tabpanel tab="面板" key="four" slot="four">
  12. <view class="tab-content">面板</view>
  13. </l-tabpanel>
  14. </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-class-headerl-class-activel-class-inactive 覆盖默认标签栏样式。

注意:

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

标签属性 (Tabs Attributes)

参数说明类型可选值默认值
l-class-header外部样式类,覆盖标签栏整体样式String--
l-class-active外部样式类,覆盖标签激活状态样式String--
l-class-inactive外部样式类,覆盖标签默认状态样式String--
l-class-line外部样式类,覆盖标签选中时装饰线的样式String--
l-class-header-line外部样式类,覆盖标签栏装饰线的样式String--
l-class-tabimage外部样式类,覆盖标签图片的样式String--
l-class-content外部样式类,覆盖标签内容样式String--
active-key默认激活tabs的keyString-默认为第一个
placement标签位置Stringtop/left/right/bottomtop
animated是否使用动画切换标签Booleanfalse
animated-for-line是否使用动画切换装饰线Booleanfalse
swipeable是否支持滑动切换标签Booleanfalse
scrollable是否滚动标签栏Booleanfalse-
active-color设置激活状态标签的文本和图标颜色String表示颜色的是16进制-
inactive-color设置未激活状态标签的文本和颜色String表示颜色的是16进制-
has-line设置是否显示标签下的装饰线Boolean-true

标签页属性 (tabpanel Attributes)

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

标签页事件 (Tabs Events)

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