water_xcx/miniprogram_npm/tdesign-miniprogram/tabs/README.md

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

引入

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

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

主题定制

CSS 变量名	说明
--td-tab-nav-bg-color	选项卡背景颜色
--td-tab-item-color	选项卡字体颜色
--td-tab-item-active-color	选项卡激活时字体颜色
--td-tab-item-disabled-color	选项卡禁止状态时字体颜色
--td-tab-track-color	选项卡滑块颜色
--td-tab-track-thickness	选项卡滑块厚度（水平时为高度，垂直时为宽度）
--td-tab-border-color	选项卡底部边框颜色

代码演示

基础选项卡

{{ base }}

超过屏幕滚动

{{ scroll }}

无下划线

{{ unline }}

动画时间可调整

{{ adjust-time }}

选项卡状态

{{ status }}

竖向选项卡

{{ vertical }}

选中态文字尺寸规格

{{ size }}

受控用法

<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
placement	String	top	选项卡位置。可选项：left/top	N
show-bottom-line	Boolean	true	是否展示底部激活线条	N
sticky	Boolean	false	是否开启粘性布局	N
sticky-props	Object	-	透传至 Sticky 组件。TS 类型：StickyProps，Sticky API Documents。详细类型定义	N
swipeable	Boolean	true	是否可以滑动切换	N
value	String / Number	-	激活的选项卡值。TS 类型：TabValue `type TabValue = string	number`。详细类型定义
default-value	String / Number	undefined	激活的选项卡值。非受控属性。TS 类型：TabValue `type TabValue = string	number`。详细类型定义

Tabs Events

名称	参数	描述
change	(value: TabValue, label: string)	激活的选项卡发生变化时触发
click	(value: TabValue, label: string)	点击 tab 选项卡时触发
scroll	({ scrollTop: number, isFixed: boolean })	页面滚动时触发，scrollTop: 距离顶部位置，isFixed: 是否吸顶

TabPanel Props

名称	类型	默认值	说明	必传
destroy-on-hide	Boolean	true	选项卡内容隐藏时是否销毁	N
disabled	Boolean	false	是否禁用当前选项卡	N
label	String	-	选项卡名称	N
panel	String / Slot	-	用于自定义选项卡面板内容	N
value	String / Number	-	选项卡的值，唯一标识。TS 类型：TabValue	N