tui-tab 标签页 会员组件

介绍

tab标签页，可超出一屏滚动，可自定义颜色，字体大小等。

引入

uni-app引入

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

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

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

uni-app版本平台差异说明

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

微信小程序引入（可在app.json中全局引入）

{
  "usingComponents": {
    "tui-tab": "/components/thorui/tui-tab/tui-tab"
  }
}

代码演示

部分功能演示，具体可参考示例程序以及文档API。

超出一屏

通过 scroll 属性设置是否可以滚动，默认为false。

<!--uni-app-->
<tui-tab :tabs="tabs" scroll @change="change"></tui-tab>

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

//data 数据
tabs:['推荐','食品','水果蔬菜','新款男装','内衣','女装','百货','医药','手机','鞋包']

修改颜色

通过 size 属性设置字体大小，bold 属性设置选中后字体是否加粗，color 属性设置颜色，selectedColor 属性设置选中后颜色，sliderBgColor 属性设置slider线条颜色。

<!--uni-app-->
<tui-tab :tabs="tabs" :size="30" bold color="#999" selectedColor="#07c160" sliderBgColor="#07c160"></tui-tab>

<!--微信小程序-->
<tui-tab tabs="{{tabs}}" size="{{30}}" bold color="#999" selectedColor="#07c160" sliderBgColor="#07c160"></tui-tab>

//data 数据
tabs:[{
	name: '主页',
	id: 1
}, {
	name: '视频',
	id: 2
}, {
	name: '小视频',
	id: 3
}, {
	name: '相册',
	id: 4
}]

Slots

插槽名称	插槽说明
-	-

Props

属性名	类型	说明	默认值
tabs	Array	标签页列表数据，数据格式见下方说明	[ ]
field V2.9.6+	String	显示文本字段名称	name
current	Number	当前选项卡	0
scroll	Boolean	是否可以滚动	false
height	Number,String	tab高度，单位rpx	80
leftGap V1.7.0+	Number,String	组件左侧距离屏幕的间隙 单位rpx	0
backgroundColor	String	tab栏背景色	#fff
size	Number	字体大小	28
color	String	字体颜色	#666
selectedColor	String	选中后字体颜色	#5677fc
bold	Boolean	选中后 字体是否加粗	false
scale V2.8.0+	Number,String	当前选中选项卡字体缩放倍数	1
sliderHeight	String	滑块高度	2px
sliderBgColor	String	滑块背景色	#5677fc
sliderRadius	String	滑块圆角 radius	2px
sliderType V2.9.6+	String	滑块类型，可选值：line、block	line
bottom	String	滑块bottom值	0
isFixed	Boolean	是否固定	false
isSticky V1.6.1	Boolean	吸顶效果，为true时isFixed失效	false
top	Number	isFixed 或 isSticky为true时top值，单位px	非H5：0，H5：44
zIndex	Number	z-index值	996

TIP

属性 sliderType 设置为 block 时，需要调整属性 sliderHeight、bottom 等值，如下示例：

<!--tabs: ['主页', '视频', '小视频', '相册']-->
<tui-tab :tabs="tabs" slider-type="block" slider-height="56rpx" bottom="12rpx" sliderBgColor="#E5FAFF"
	selectedColor="#11CDFC" slider-radius="32rpx"></tui-tab>

// tabs 属性数据格式说明

//格式一：
tabs: ['主页', '视频', '小视频', '相册']

//格式二，其中默认显示文本字段key值为name，可通过属性 field 进行指定
//例如：将以下数据name换成title，则 属性 field设置为title即可
tabs: [{
	name: '主页',
	id: 1
}, {
	name: '视频',
	id: 2
}, {
	name: '小视频',
	id: 3
}, {
	name: '相册',
	id: 4
}]

Events

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

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

Methods

方法名	说明	传入参数	回调参数
init	重新初始化组件	-	-

其他说明

TIP

若部分机型出现滚动条，想隐藏滚动条可通过css的-webkit-scrollbar控制。

/* 在全局css，或页面加入以下样式 */
::-webkit-scrollbar {
	width: 0 !important;
	height: 0 !important;
	color: transparent !important;
	display: none;
}

预览

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

特别说明

该组件为 会员组件，非开源内容，需开通会员才可获取使用。

线上程序扫码预览

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