# tui-tabs 标签页
介绍
tabs标签页,支持设置字体颜色、字体大小、背景色、高度等,此组件不支持超出一屏,滚动标签页请使用组件 tui-tab (opens new window)。
# 引入
# uni-app引入
第一种,手动引入(可全局引入)
import tuiTabs from "@/components/thorui/tui-tabs/tui-tabs"
export default {
components:{
tuiTabs
}
}
第二种,开启easycom组件模式,如果不了解如何配置,可先查看 官网文档 (opens new window)。
# 微信小程序引入(可在app.json中全局引入)
{
"usingComponents": {
"tui-tabs": "/components/thorui/tui-tabs/tui-tabs"
}
}
# 代码演示
部分功能演示,具体可参考示例程序以及文档API。
基础用法
通过 tabs
属性传入标签页数组内容,默认单个标签页的宽度为25%,即四等分,当需要调整标签页个数时,需要调整相应属性 itemWidth
的值。
currentTab
属性为当前选项卡索引,change
为切换标签页时触发的事件。
<!--uni-app-->
<tui-tabs :tabs="tabs" :currentTab="currentTab" @change="change"></tui-tabs>
<!--微信小程序-->
<tui-tabs tabs="{{tabs}}" currentTab="{{currentTab}}" bindchange="change"></tui-tabs>
//data 数据
tabs: [{
name: "今日特拼"
}, {
name: "全部"
}, {
name: "新品"
}, {
name: "禁用状态",
disabled: true
}]
改变标签页数量
通栏情况下,当标签页数量只有2时,设置属性 itemWidth
的值为50%,当tabs数组的长度动态变化时,itemWidth
的值为 100/tabs.length。
<!--uni-app-->
<tui-tabs :tabs="tabs" :currentTab="currentTab" itemWidth="50%" @change="change"></tui-tabs>
<!--微信小程序-->
<tui-tabs tabs="{{tabs}}" currentTab="{{currentTab}}" itemWidth="50%" bindchange="change"></tui-tabs>
//data 数据
tabs: [{
name: "正在疯抢"
}, {
name: "即将开始"
}]
# Slots
none
# Props
参数 | 类型 | 说明 | 默认值 |
---|---|---|---|
tabs | Array | 标签页列表数据 | [ ] |
width | Number | tabs宽度,不传值则默认使用windowWidth,单位px | 0 |
height | Number | 高度,单位:rpx | 80 |
padding | Number | 只对左右padding起作用,上下为0,单位:rpx | 30 |
backgroundColor | String | 背景颜色 | #FFFFFF |
isFixed | Boolean | 是否固定 | false |
top | Number | top值,isFixed为true时有效,单位:px | App和小程序:0,H5为44px |
unlined | Boolean | 是否去掉底部线条 | false |
currentTab | Number | 当前选项卡 | 0 |
sliderWidth | Number | 滑块宽度,单位:rpx | 68 |
sliderHeight | Number | 滑块高度,单位:rpx | 6 |
sliderBgColor | String | 滑块背景颜色 | #5677fc |
sliderRadius | String | 圆角设置 | 50rpx |
bottom | Number | 滑块bottom值,单位:rpx | 0 |
itemWidth | String | 标签页宽度 | 25% |
color | String | 字体颜色 | #666 |
selectedColor | String | 选中后字体颜色 | #5677fc |
size | Number | 字体大小 | 28 |
bold | Boolean | 选中后 字体是否加粗 ,未选中则无效 | false |
zIndex | [Number, String] | z-index值 | 996 |
tabs属性 Object参数说明
name
标签页标题
disabled
是否禁用点击
# Events
事件名 | 说明 | 回调参数 |
---|---|---|
change | 切换标签页时触发事件 | {index: Number} //标签页索引值 |
# 预览
请以移动端效果为准,touch事件目前尚未在PC端做兼容。
# 线上程序扫码预览
![]() | ![]() | ![]() |
---|---|---|
ThorUI组件库小程序码 | H5二维码 | ThorUI示例小程序码 |