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>

// data 数据 及 方法
export default {
  data() {
  	return {
  		currentTab: 0,
  		tabs: [{
  			name: "今日特拼"
  		}, {
  			name: "全部"
  		}, {
  			name: "新品"
  		}, {
  			name: "禁用状态",
  			disabled: true
  		}]
  	}
  },
  methods: {
  	//切换tab，逻辑请自行处理
  	change(e) {
  		this.currentTab = e.index
  	}
  }
}

<!--微信小程序-->
<tui-tabs tabs="{{tabs}}" currentTab="{{currentTab}}" bindchange="change"></tui-tabs>

// data 数据 及 方法
Page({
  data: {
    currentTab: 0,
    tabs: [{
    	name: "今日特拼"
    }, {
    	name: "全部"
    }, {
    	name: "新品"
    }, {
    	name: "禁用状态",
    	disabled: true
    }]
  },
  //切换tab，逻辑请自行处理
  change(e) {
  	this.currentTab = e.index
  }
})

// Make sure to add code blocks to your code group

改变标签页数量

通栏情况下，当标签页数量只有2时，设置属性 itemWidth的值为50%，当tabs数组的长度动态变化时，itemWidth 的值为 100/tabs.length。

<!--uni-app-->
<tui-tabs :tabs="tabs" :currentTab="currentTab" itemWidth="50%" @change="change"></tui-tabs>

// data 数据 及 方法
export default {
  data() {
  	return {
  		currentTab: 0,
  		tabs: [{
  			name: "正在疯抢"
  		}, {
  			name: "即将开始"
  		}]
  	}
  },
  methods: {
  	//切换tab，逻辑请自行处理
  	change(e) {
  		this.currentTab = e.index
  	}
  }
}

<!--微信小程序-->
<tui-tabs tabs="{{tabs}}" currentTab="{{currentTab}}" itemWidth="50%" bindchange="change"></tui-tabs>

// data 数据 及 方法
Page({
  data: {
    currentTab: 0,
    tabs: [{
    	name: "正在疯抢"
    }, {
    	name: "即将开始"
    }]
  },
  //切换tab，逻辑请自行处理
  change(e) {
  	this.currentTab = e.index
  }
})

// Make sure to add code blocks to your code group

Slots

插槽名称	插槽说明
-	-

Props

属性名	类型	说明	默认值
tabs	Array	标签页列表数据	[ ]
field V2.9.6+	String	显示文本字段名称，通过此属性指定key	name
badgeField V2.9.6+	String	角标字段名称，通过此属性指定key	num
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%，V2.8.0+后，不传值则组件内部自动计算	-
color	String	字体颜色	#666
selectedColor	String	选中后字体颜色	#5677fc
size	Number	字体大小	28
bold	Boolean	选中后 字体是否加粗 ，未选中则无效	false
scale V2.8.0+	Number,String	当前选中选项卡字体缩放倍数	1
badgeColor V1.6.5	String	角标字体颜色	#fff
badgeBgColor V1.6.5	String	角标背景颜色	#F74D54
zIndex	[Number, String]	z-index值	996

tabs属性 Object约定参数说明

name 标签页标题，可通过 field 属性指定key

num 数字角标数，可通过 badgeField 属性指定key V1.6.5

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

disabled 是否禁用点击

Events

注：uni-app端绑定事件使用@前缀，如@change；微信小程序原生使用bind前缀，如bindchange

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

预览

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

特别说明

• 该组件为 开源组件，uni-app版所有用户均可免费使用。
• 微信小程序原生版仅开源至v1.4.2，后续版本需开通会员才可获取使用。

线上程序扫码预览

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