---
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
没有合适的资源?快使用搜索试试~ 我知道了~
常用工具超实用的多功能工具箱小程序源码 支持流量主变现海量工具,功能不断增加.zip
共370个文件
js:110个
wxss:74个
json:62个
1.该资源内容由用户上传,如若侵权请联系客服进行举报
2.虚拟产品一经售出概不退款(资源遇到问题,请及时私信上传者)
2.虚拟产品一经售出概不退款(资源遇到问题,请及时私信上传者)
版权申诉
0 下载量 41 浏览量
2022-12-23
11:37:45
上传
评论
收藏 817KB ZIP 举报
温馨提示
这是一款云开发超多功能工具箱组合微信小程序源码 不需要任何服务器和云服务资源,拥有海量工具,功能不断增加,支持流量主 测算工具: 网速测试,计算器,血型计算,关系计算器,一生时间,尺码计算,色盲测试,房贷计算器,尺子 ,量角器,BMI计算器 信息查询: 今天吃什么,粤语翻译,福布斯排行榜,Ip查询,常用号码,国旗头像,每日一图,图片拼接,九宫格切图 常用工具: 节日倒计时,手机清灰,随机数,大转盘,全屏时钟,取色器,文本解密,全屏弹幕,震动,二维码创建,文本加密,倒计时,二维码识别 娱乐工具: 恶搞理发器,插电充钱,数钱,2048小游戏
资源推荐
资源详情
资源评论
收起资源包目录
常用工具超实用的多功能工具箱小程序源码 支持流量主变现海量工具,功能不断增加.zip (370个子文件)
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
storage.js 629B
app.js 464B
共 370 条
- 1
- 2
- 3
- 4
资源评论
智慧浩海
- 粉丝: 1w+
- 资源: 5442
下载权益
C知道特权
VIP文章
课程特权
开通VIP
上传资源 快速赚钱
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
最新资源
资源上传下载、课程学习等过程中有任何疑问或建议,欢迎提出宝贵意见哦~我们会及时处理!
点击此处反馈
安全验证
文档复制为VIP权益,开通VIP直接复制
信息提交成功