---
title: Tabs 选项卡
description: 用于内容分类后的展示切换。
spline: navigation
isComponent: true
---
## 引入
全局引入,在 miniprogram 根目录下的`app.json`中配置,局部引入,在需要引入的页面或组件的`index.json`中配置。
```json
"usingComponents": {
"t-tabs": "tdesign-miniprogram/tabs/tabs",
"t-tab-panel": "tdesign-miniprogram/tabs/tab-panel"
}
```
## 代码演示
### 基础选项卡
横向选项卡支持超过屏幕滑动
<img src="https://tdesign.gtimg.com/miniprogram/readme/tabs-3.png" width="375px" height="50%">
```html
<t-tabs defaultValue="{{0}}" bind:change="onTabsChange">
<t-tab-panel label="标签页一" value="0">标签一内容</t-tab-panel>
<t-tab-panel label="标签页二" value="1">标签二内容</t-tab-panel>
</t-tabs>
```
### 不同状态的选项卡
<img src="https://tdesign.gtimg.com/miniprogram/readme/tabs-2.png" width="375px" height="50%">
```html
<t-tabs defaultValue="0" bind:change="onTabsChange">
<t-tab-panel label="标签页一" value="0">标签一内容</t-tab-panel>
<t-tab-panel label="标签页二" value="1">标签二内容</t-tab-panel>
<t-tab-panel label="禁用状态" value="2" disabled>禁用状态</t-tab-panel>
</t-tabs>
```
### 竖向选项卡
<img src="https://tdesign.gtimg.com/miniprogram/readme/tabs-1.png" width="375px" height="50%">
```html
<t-tabs defaultValue="{{1}}" placement="left" bind:change="onTabsChange">
<t-tab-panel label="标签页一" value="0">
<view class="tab-content">标签一内容区</view>
</t-tab-panel>
<t-tab-panel label="标签页二" value="1">
<view class="tab-content">标签二内容区</view>
</t-tab-panel>
<t-tab-panel label="标签页三" value="2">
<view class="tab-content">标签三内容区</view>
</t-tab-panel>
</t-tabs>
```
```js
Page({
onTabsChange(event: any) {
console.log(event.detail);
},
});
```
### 受控用法
```html
<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>
```
```js
Page({
data: {
value: '0',
},
onTabsChange(e) {
this.setData({ value: e.detail.value })
},
});
```
## API
### Tabs Props
名称 | 类型 | 默认值 | 说明 | 必传
-- | -- | -- | -- | --
animation | Object | - | 动画效果设置。其中 duration 表示动画时长。TS 类型:`TabAnimation` `type TabAnimation = { duration: number } & Record<string, any>`。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/tabs/type.ts) | 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
value | String / Number | - | 激活的选项卡值。TS 类型:`TabValue` `type TabValue = string | number`。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/tabs/type.ts) | N
default-value | String / Number | undefined | 激活的选项卡值。非受控属性。TS 类型:`TabValue` `type TabValue = string | number`。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/tabs/type.ts) | N
### Tabs Events
名称 | 参数 | 描述
-- | -- | --
change | `(value: TabValue)` | 激活的选项卡发生变化时触发
### TabPanel Props
名称 | 类型 | 默认值 | 说明 | 必传
-- | -- | -- | -- | --
destroy-on-hide | Boolean | true | 选项卡内容隐藏时是否销毁 | N
disabled | Boolean | false | 是否禁用当前选项卡 | N
label | String / Slot | - | 选项卡名称,可自定义选项卡导航内容 | N
panel | String / Slot | - | 用于自定义选项卡面板内容 | N
value | String / Number | - | 选项卡的值,唯一标识。TS 类型:`TabValue` | N
没有合适的资源?快使用搜索试试~ 我知道了~
多功能工具箱小程序 多功能工具箱小程序
共377个文件
js:110个
wxss:74个
json:62个
需积分: 0 0 下载量 198 浏览量
2023-05-25
16:46:18
上传
评论
收藏 756KB RAR 举报
温馨提示
多功能工具箱小程序
资源推荐
资源详情
资源评论
收起资源包目录
多功能工具箱小程序
多功能工具箱小程序 (377个子文件)
【点击查最新更新】.bat 26B
readme.html 4KB
rmb.jpg 40KB
run.jpg 28KB
1.jpg 18KB
2.jpg 18KB
3.jpg 18KB
more.jpg 8KB
BackGround.jpg 3KB
relationship.js 54KB
weapp.qrcode.js 23KB
lodash.js 20KB
solarlunar.js 19KB
aes.js 19KB
data.js 18KB
index.js 15KB
md5.min.js 14KB
mutually.js 13KB
imgUrl.js 13KB
zhuanpan.js 12KB
mortgageHelper.js 10KB
rui-datepicker.js 9KB
index.js 9KB
edit.js 9KB
tabs.js 7KB
xiaojueding.js 7KB
data.js 6KB
game_manager.js 6KB
chooseItem.js 6KB
color.js 6KB
index.js 6KB
bigWheel.js 5KB
protractor.js 5KB
index.js 5KB
md5.js 5KB
index.js 5KB
add.js 5KB
index.js 4KB
phone.js 4KB
index.js 4KB
utils.js 4KB
index.js 3KB
bmi.js 3KB
Base64.js 3KB
index.js 3KB
instantiationDecorator.js 3KB
networkSpeed.js 3KB
life_time.js 3KB
createQrcode.js 3KB
bigWheelSetting.js 3KB
index.js 3KB
index.js 3KB
mortgage_util.js 3KB
showImage.js 3KB
index.js 3KB
detail.js 3KB
blood.js 3KB
util.js 3KB
util.js 3KB
2048.js 3KB
show_danmu.js 3KB
crypt.js 3KB
detail.js 3KB
switch.js 3KB
cuttingNine.js 2KB
clock.js 2KB
decrypt.js 2KB
grid.js 2KB
flatTool.js 2KB
countDown.js 2KB
blind.js 2KB
aes_util.js 2KB
edit_eat.js 2KB
ruler.js 2KB
screenshotConnect.js 2KB
cell.js 2KB
index.js 2KB
tab-panel.js 2KB
detail.js 2KB
icon.js 2KB
util.js 2KB
randomNum.js 1KB
index.js 1KB
index.js 1KB
index.js 1KB
control.js 1KB
common_utils.js 1KB
share.js 1KB
danmu.js 1KB
index.js 1KB
touch.js 1KB
money.js 1KB
scanQrcode.js 1008B
version.js 919B
dom.js 891B
props.js 799B
index.js 726B
typeof.js 717B
tile.js 711B
props.js 639B
共 377 条
- 1
- 2
- 3
- 4
资源评论
weixin_45989589
- 粉丝: 0
- 资源: 1
上传资源 快速赚钱
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
安全验证
文档复制为VIP权益,开通VIP直接复制
信息提交成功