标签页 Tabs

选项卡切换组件

标签页需tabs和tabpanel两个组件关联使用。

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

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

WARNING

为便于下文的说明，在这里约定以下定义：

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

等宽标签

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

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

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

必须在 tabpanel 组件中传入 tab 、 key 、 slot 属性，其中：

• 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" 时，支持滑动内容部分切换标签。

注意事项

• swiperable 的实现是基于微信原生swiper组件，当设置 placement 为： top 和 bottom 时，默认高度为 150px 。
• 考虑到用户使用场景多样，我们并没有解决swiper组件高度自适应的问题，具体解决方式可以参考：
  • 微信小程序swiper高度自适应，swiper的子元素高度不固定
  • 微信小程序swiper高度动态适配 | 微信开放社区

图标标签

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

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

图片资源

使用image配置图片资源的样式，可配置项有：

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

标签初始样式

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

注意:

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

标签属性 (Tabs Attributes）

标签页属性 (tabpanel Attributes）

标签页事件 (Tabs Events）