Tui Plus Vapor

Appearance

# t-tabs

Tabs 标签页

t-tabs 组件介绍 ​

t-tabs 用于组织和管理多个页面的切换，支持横向滚动、自定义滑块样式和右侧图标。

t-tabs 平台兼容 ​

HarmonyH5AndroidiOS小程序UTS
✅✅✅✅✅✅

t-tabs 基础用法 ​

基础用法参考 demo/tabs/tabs.uvue，通过 t-tabs-item 子组件定义标签项。

vue
<template>
	<view class="p-15">
		<t-card title='Tabs 标签导航'
				class="r-10 mb-15"
				sub-title="组织和管理多个页面的切换"></t-card>
		<t-section title='基础使用-type-size'
				   class="r-10 mb-15"></t-section>
		<t-tabs :class="[`trm mb-15 tvg`]"
				bar-class="twhr-10"
				:current="current"
				@change="ontabschange"
				type="primary"
				size="large">
			<t-tabs-item v-for="(item,i) in tabsList2"
						 :key="i"
						 :value="i"
						 :title="item.title"
						 :disabled="item.disabled==null?false:item.disabled"
						 :badge="item.value!=null && (item.value!)>0"
						 :badge-attrs="{dot:item.dot ?? false,text:`${item.value==null?0:item.value}`}"></t-tabs-item>
		</t-tabs>
		<t-tabs :class="[`trm mb-15 tvg`]"
				:current="current"
				@change="ontabschange"
				type="error"
				size="medium">
			<t-tabs-item v-for="(item,i) in tabsList2"
						 :key="i"
						 :value="i"
						 :title="item.title"
						 :disabled="item.disabled==null?false:item.disabled"
						 :badge="item.value!=null && (item.value!)>0"
						 :badge-attrs="{dot:item.dot ?? false,text:`${item.value==null?0:item.value}`}"></t-tabs-item>
		</t-tabs>
		<t-tabs :class="[`trm mb-15 tvg`]"
				:current="current"
				@change="ontabschange"
				type="warning"
				size="small">
			<t-tabs-item v-for="(item,i) in tabsList2"
						 :key="i"
						 :value="i"
						 :title="item.title"
						 :disabled="item.disabled==null?false:item.disabled"
						 :badge="item.value!=null && (item.value!)>0"
						 :badge-attrs="{dot:item.dot ?? false,text:`${item.value==null?0:item.value}`}"></t-tabs-item>
		</t-tabs>
		<t-tabs :class="[`trm mb-15 tvg`]"
				:current="current"
				@change="ontabschange"
				type="success"
				size="mini">
			<t-tabs-item v-for="(item,i) in tabsList2"
						 :key="i"
						 :value="i"
						 :title="item.title"
						 :disabled="item.disabled==null?false:item.disabled"
						 :badge="item.value!=null && (item.value!)>0"
						 :badge-attrs="{dot:item.dot ?? false,text:`${item.value==null?0:item.value}`}"></t-tabs-item>
		</t-tabs>
		<t-section title='禁用滚动+设置主题'
				   class="r-10 mb-15"></t-section>
		<t-tabs :class="[`trm mb-15 tvg`]"
				:current="current"
				@change="ontabschange"
				type="success"
				size="large"
				:scrollable="false">
			<t-tabs-item v-for="(item,i) in tabsList1"
						 :key="i"
						 :value="i"
						 :title="item.title"
						 :disabled="item.disabled==null?false:item.disabled"
						 :badge="item.value!=null && (item.value!)>0"
						 :badge-attrs="{dot:item.dot ?? false,text:`${item.value==null?0:item.value}`}"></t-tabs-item>
		</t-tabs>
		<t-section title='滚动条插槽+右侧菜单按钮'
				   class="r-10 mb-15"></t-section>
		<t-tabs :class="[`trm mb-15 tvg`]"
				:current="current"
				@change="ontabschange"
				type="primary"
				size="large"
				:scrollable="false"
				rightIcon="list"
				bar-class="bgn!"
				right-icon-class="s-30!">
			<template v-slot:bar>
				<image class="w-15 h-5"
					   src="/static/image/tabsline.png"></image>
			</template>
			<t-tabs-item v-for="(item,i) in tabsList1"
						 :key="i"
						 :value="i"
						 :title="item.title"
						 :disabled="item.disabled==null?false:item.disabled"
						 :badge="item.value!=null && (item.value!)>0"
						 :badge-attrs="{dot:item.dot ?? false,text:`${item.value==null?0:item.value}`}"></t-tabs-item>
		</t-tabs>
		<tui-theme-switch></tui-theme-switch>
	</view>
</template>
<script setup>
	import { ref } from 'vue'
	import { onMounted } from 'vue'
	type TuiTabsOption = {
		disabled ?: boolean
		dot ?: boolean
		title : string
		value ?: number
	}
	type TuiTestTabsList = {
		list : TuiTabsOption[]
		list1 : TuiTabsOption[]
		list2 : TuiTabsOption[]
		list5 : TuiTabsOption[]
	}
	const lists : TuiTestTabsList = {
		"list": [
			{
				"title": "关注"
			},
			{
				"title": "推荐"
			},
			{
				"title": "电影"
			},
			{
				"title": "科技"
			},
			{
				"title": "音乐"
			},
			{
				"title": "美食"
			},
			{
				"title": "文化"
			},
			{
				"title": "财经"
			},
			{
				"title": "手工"
			}
		],
		"list1": [
			{
				"title": "关注",
				"dot": false,
				"value": 5
			},
			{
				"title": "推荐",
				"dot": true,
				"value": 5
			},
			{
				"title": "电影"
			},
			{
				"title": "科技"
			},
			{
				"title": "音乐"
			},
			{
				"title": "美食"
			},
			{
				"title": "文化"
			},
			{
				"title": "财经"
			},
			{
				"title": "手工"
			}
		],
		"list2": [
			{
				"title": "关注",
				"disabled": false,
				"dot": false,
				"value": 0
			},
			{
				"title": "推荐",
				"disabled": false,
				"dot": true,
				"value": 1
			},
			{
				"title": "电影",
				"disabled": false,
				"dot": true,
				"value": 0
			},
			{
				"title": "科技",
				"disabled": false,
				"dot": false,
				"value": 0
			}
		],
		"list5": [
			{
				"title": "关注",
				"disabled": false,
				"dot": false,
				"value": 0
			},
			{
				"title": "推荐",
				"disabled": false,
				"dot": true,
				"value": 1
			},
			{
				"title": "电影",
				"disabled": false,
				"dot": true,
				"value": 0
			},
			{
				"title": "科技",
				"disabled": true,
				"dot": false,
				"value": 1
			},
			{
				"title": "音乐",
				"disabled": false,
				"dot": false,
				"value": 5
			},
			{
				"title": "美食",
				"disabled": false,
				"dot": false,
				"value": 0
			},
			{
				"title": "文化",
				"disabled": false,
				"dot": false,
				"value": 0
			},
			{
				"title": "运动户外",
				"disabled": false,
				"dot": false,
				"value": 0
			},
			{
				"title": "手工",
				"disabled": false,
				"dot": false,
				"value": 0
			}
		]
	}
	const current = ref(2)
	const rowsSize = ref([['18px', '300px'], ['18px', '150px'], ['18px', '250px'], ['18px', '200px']])
	const tabsList1 = ref<TuiTabsOption[]>([])
	const tabsList2 = ref<TuiTabsOption[]>([])

	const ontabschange = (cur : number) => {
		current.value = cur
	}

	const iconClick = () => {
		uni.showToast({
			title: '点击右侧插槽'
		})
	}
	onLoad(() => {
		tabsList1.value = lists.list2
		tabsList2.value = lists.list5
	})
</script>

t-tabs Props ​

属性名说明类型默认值
path点击组件后跳转的页面路径；为空时仅响应事件string''
hover是否启用点击效果booleanfalse
type组件主题类型，可选 info、primary、error、warning、successstring''
disabled是否禁用booleanfalse
effect组件显示主题，可选 normal、dark、light、plainstring'normal'
size组件尺寸，可选 large、medium、small、ministring'medium'
barClass滑块的样式，对应外部类 bar-classstring''
current当前滑块所在的索引number1
scrollable是否可滚动booleanfalse
rightIcon右侧图标名称string''
rightIconClass右侧图标的样式，对应外部类 right-icon-classstring''

t-tabs Events ​

事件名说明回调参数
change当标签切换时触发value: number
click点击时触发-
transitionend动画结束时触发-
initFinished组件初始化完成时触发，返回组件节点信息-
touchstart触摸开始时触发-
touchend触摸结束时触发-
touchmove触摸移动时触发-
touchcancel触摸取消时触发-

外部类 ​

类名说明
bar-class滑块样式
right-icon-class右侧图标样式

t-tabs Slots ​

插槽名说明
default默认插槽，放置 t-tabs-item 子组件
right右侧内容插槽，默认显示右侧图标
bar滑块内容插槽，可自定义滑块样式