tui-tabs 标签页

介绍

tabs标签页，支持设置字体颜色、字体大小、背景色、高度等，此组件不支持超出一屏，滚动标签页请使用组件 tui-tab (opens new window)。

引入

uni-app引入

第一种，手动引入（可全局引入）

import tuiTabs from "@/components/thorui/tui-tabs/tui-tabs.vue"
export default {
	components:{
		tuiTabs
	}
}

第二种，开启easycom组件模式，如果不了解如何配置，可先查看 官网文档 (opens new window)。

uni-app版本平台差异说明

App-Nvue	App-vue	H5	微信小程序	支付宝小程序	百度小程序	字节小程序	QQ小程序
升级中	√	√	√	√	√	√	√

微信小程序引入（可在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
isSlider V1.7.2+	Boolean	是否显示滑块	true
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
badgeColor V1.6.5	String	角标字体颜色	#fff
badgeBgColor V1.6.5	String	角标背景颜色	#F74D54
zIndex	[Number, String]	z-index值	996

tabs属性 Object约定参数说明

name 标签页标题

num 数字角标数V1.6.5

isDot 是否显示圆点角标V1.6.5

disabled 是否禁用点击

Events

事件名	说明	回调参数
change	切换标签页时触发事件	{index: Number} //标签页索引值

预览

请以移动端效果为准，touch事件目前尚未在PC端做兼容。

线上程序扫码预览

ThorUI组件库小程序码	H5二维码	ThorUI示例小程序码