Tabs 标签页

介绍

通过标签切换多个内容容器。

使用指南

一般用法

<tms-tabs>
  <tms-tab wx:for="{{listData}}" wx:key="index" bind:on-tab-change="onChange" title="{{item.title}}">
    <view class="demo-tab-body">
      这是 {{item.title}} 的内容
    </view>
  </tms-tab>
</tms-tabs>

Component({
  data: {
    listData: [
      {
        title: '标签一',
      },
      {
        title: '标签2',
      },
      {
        title: '标签3',
      },
      {
        title: '标签4',
      },
      {
        title: '标签5',
      },
      {
        title: '标签6',
      },
      {
        title: '标签7',
      },
    ],
  },
  methods:{
    onChange(event) {
      const { index } = event.detail;
    },
  }
})

设置区域内最大标签数量

<tms-tabs>
  <tms-tab wx:for="{{listData}}" wx:key="index" title="{{item.title}}" scrollThreshold="{{3}}">
    <view class="demo-tab-body">
      这是 {{item.title}} 的内容
    </view>
  </tms-tab>
</tms-tabs>

标题收缩模式

<tms-tabs>
  <tms-tab wx:for="{{listData}}" wx:key="index" title="{{item.title}}" width-shrink>
    <view class="demo-tab-body">
      这是 {{item.title}} 的内容
    </view>
  </tms-tab>
</tms-tabs>

自定义样式

<tms-tabs>
  <tms-tab wx:for="{{listData}}" wx:key="index" title="{{item.title}}" 
           title-style="{{index===1&&'font-size:20px;'}}">
    <view class="demo-tab-body">
      这是 {{item.title}} 的内容
    </view>
  </tms-tab>
</tms-tabs>

受控模式

<tms-tabs bind:on-tab-change="onChange" bind:on-tab-change="onChange" current-index="{{currentIndex}}">
  <tms-tab wx:for="{{listData}}" wx:key="index" title="{{item.title}}">
    <view class="demo-tab-body">
      这是 {{item.title}} 的内容
    </view>
  </tms-tab>
</tms-tabs>

Component({
  data: {
    currentIndex: 0,
    listData: [
      {
        title: '标签一',
      },
      {
        title: '标签2',
      },
      {
        title: '标签3',
      },
      {
        title: '标签4',
      },
      {
        title: '标签5',
      },
      {
        title: '标签6',
      },
      {
        title: '标签7',
      },
    ],
  },
  methods:{
    onChange(event) {
      const { index } = event.detail;
      this.setData({
        currentIndex: index,
      });
    },
  }
})

API

tabs props

属性	说明	类型	默认值	版本
current-index	控制当前显示哪个标签，传入对应数组下标	number	0
scroll-threshold	最多显示几个标签，每个标签平分宽度。	number	4
width-shrink	标签从左往右排列，宽度自适应，scroll-shreshold参数无效	boolean	false
touch-scrollable	开启手势滑动切换页面	boolean	true
scroll-animation	切换页面时开启过渡动画	boolean	true
sticky	标签自动吸附到顶部	boolean	false
offset-top	吸顶时与顶部的距离，单位 px	Number	—	0
control	受控模式，点击或滑动不会自动切换标签	boolean	false
indicator-style	自定义指示条元素的style	string	-

tab props

属性	说明	类型	默认值	版本
title	标签文本内容	string	-
title-style	定义这个标签的元素样式	string	-

EVENTS

属性	说明	类型
bind:on-tab-change	点击非当前标签事件	(event) => {}

CSS变量

// 标题文本大小
--tabs-tab-font-size: 28rpx;
// 标题padding
--tabs-tab-padding: 10rpx 20rpx 30rpx;
// 标题背景色
--tabs-tab-background: #FFF;
// 指示器高度
--tabs-indicator-height: 4rpx;
// 指示器宽度
--tabs-indicator-width: 40rpx;
// 指示器背景色
--tabs-indicator-background: #ee0a24;

FAQ