# 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示例
ThorUI组件库小程序码 H5二维码 ThorUI示例小程序码