tabs标签页

tabs标签页,支持设置字体颜色、字体大小、背景色、高度等。

组件结构

<template>
	<view class="tui-tabs-view" :class="[isFixed?'tui-tabs-fixed':'tui-tabs-relative',unlined?'tui-unlined':'']" :style="{height:height+'rpx',padding:`0 ${padding}rpx`,background:backgroundColor,top:isFixed?top+'px':'auto'}">
		<view v-for="(item,index) in tabs" :key="index" class="tui-tabs-item" :style="{width:itemWidth}" @tap.stop="swichTabs(index)">
			<view class="tui-tabs-title" :class="{'tui-tabs-active':currentTab==index,'tui-tabs-disabled':item.disabled}" :style="{color:currentTab==index?selectedColor:color,fontSize:size+'rpx',lineHeight:size+'rpx',fontWeight:bold && currentTab==index?'bold':'normal'}">{{item.name}}</view>
		</view>
		<view class="tui-tabs-slider" :style="{transform:'translateX('+scrollLeft+'px)',width:sliderWidth+'rpx',height:
	sliderHeight+'rpx',borderRadius:sliderRadius,bottom:bottom,background:sliderBgColor,marginBottom:bottom=='50%'?('-'+sliderHeight/2+'rpx'):0}"></view>
	</view>
</template>

组件脚本

<script>
	export default {
		name: "tuiTabs",
		
		...省略n行
		
	}
</script>

组件样式

... 此处省略n行

脚本说明

props

参数 类型 描述 默认值
tabs Array 标签页列表数据 []
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

tabs数据项明细

名称 描述
name 标签页标题
disabled 是否禁用点击

methods

名称 描述
@change 切换标签页事件

示例

H5预览地址

https://www.thorui.cn/h5/#/pages/extend/tabs/tabs

H5二维码

小程序二维码