zxh/E_WeChat @ cf2a5a14ace67e6ebb76f99fc53c8aca06848cd2

title: Tabs 选项卡 description: 用于内容分类后的展示切换。 spline: navigation

isComponent: true

引入

全局引入，在 miniprogram 根目录下的app.json中配置，局部引入，在需要引入的页面或组件的index.json中配置。

"usingComponents": {
  "t-tabs": "tdesign-miniprogram/tabs/tabs",
  "t-tab-panel": "tdesign-miniprogram/tab-panel/tab-panel"
}

代码演示

基础选项卡

等距选项卡

带图标选项卡

带徽章选项卡

带内容区选项卡

选项卡状态

选项卡尺寸

选项卡样式

使用 theme 属性可以变换风格，支持 line = 线条（默认）；tag = 标签；card = 卡片

受控用法

<t-tabs value="{{value}}" bind:change="onTabsChange">
  <t-tab-panel label="标签页一" value="0">标签一内容</t-tab-panel>
  <t-tab-panel label="标签页二" value="1">标签二内容</t-tab-panel>
</t-tabs>

Page({
  data: {
    value: '0',
  },
  onTabsChange(e) {
    this.setData({ value: e.detail.value })
  },
});

与 Popup 使用

 <t-popup visible="{{visible}}" bind:visible-change="onVisibleChange">
  <t-tabs id="tabs" defaultValue="{{0}}" bind:change="onTabsChange" bind:click="onTabsClick" t-class="custom-tabs">
    <t-tab-panel label="标签页一" value="0">标签一内容</t-tab-panel>
    <t-tab-panel label="标签页二" value="1">标签二内容</t-tab-panel>
    <t-tab-panel label="标签页三" value="2">标签三内容</t-tab-panel>
  </t-tabs>
</t-popup>

Page({
  data: {
    visible: false
  },
  showPopup() {
    this.setData({
      visible: true
    }, () => {
      const tabs = this.selectComponent('tabs');

      tabs.setTrack(); // 这一步很重要，因为小程序的无法正确执行生命周期，所以需要手动设置下 tabs 的滑块
    })
  }
})

API

Tabs Props

名称 | 类型 | 默认值 | 说明 | 必传 -- | -- | -- | -- | -- animation | Object | - | 动画效果设置。其中 duration 表示动画时长。TS 类型：TabAnimation type TabAnimation = { duration: number } & Record<string, any>。详细类型定义 | N external-classes | Array | - | 组件类名，分别用于设置组件外层元素、选项卡单项、选项卡激活态、滚动条样式类名等类名。['t-class', 't-class-item', 't-class-active', 't-class-track'] | N show-bottom-line | Boolean | true | 是否展示底部激活线条 | N space-evenly | Boolean | true | 选项卡头部空间是否均分 | N sticky | Boolean | false | 是否开启粘性布局 | N sticky-props | Object | - | 透传至 Sticky 组件。TS 类型：StickyProps，Sticky API Documents。详细类型定义 | N swipeable | Boolean | true | 是否可以滑动切换 | N theme | String | line | 标签的样式。可选项：line/tag/card | N value | String / Number | - | 激活的选项卡值。TS 类型：TabValue type TabValue = string \| number。详细类型定义 | N default-value | String / Number | undefined | 激活的选项卡值。非受控属性。TS 类型：TabValue type TabValue = string \| number。详细类型定义 | N

Tabs Events

TabPanel Props

README.md 5.3 KB Historie Surový