Tui Plus Vapor

Appearance

t-tabbar ​

底部标签栏

t-tabbar 组件介绍 ​

t-tabbar 用于组织全屏底部导航。每个 t-tabbar-item 同时定义一个导航项和对应的页面内容，组件通过 v-model 管理当前激活项。

t-tabbar 平台兼容 ​

HarmonyH5AndroidiOS小程序UTS
✅✅✅✅✅✅

t-tabbar 基础用法 ​

将 v-model 绑定到当前索引。t-tabbar-item 的默认插槽是该 tab 的页面内容，首次切换后内容会保留，便于保留滚动位置和页面状态。

vue
<template>
	<t-tabbar v-model="current">
		<t-tabbar-item icon-path="grid"
					   selected-icon-path="grid-fill"
					   text="首页">
			<scroll-view :class="[`f b`]"
						 :show-scrollbar="false">
				<tui-theme-switch></tui-theme-switch>
				<t-text>首页内容</t-text>
			</scroll-view>
		</t-tabbar-item>

		<t-tabbar-item icon-path="setting"
					   selected-icon-path="setting-fill"
					   text="服务">
			<scroll-view :class="[`f b`]"
						 :show-scrollbar="false">
				<t-text>服务内容</t-text>
			</scroll-view>
		</t-tabbar-item>

		<t-tabbar-item icon-path="account"
					   selected-icon-path="account-fill"
					   text="我的">
			<view :class="[`f b`]">
				<t-text>我的内容</t-text>
			</view>
		</t-tabbar-item>
	</t-tabbar>
</template>

<script setup lang="uts">
	const current = ref<number>(0)
</script>

自定义中间按钮 ​

没有传入 icon-path、selected-icon-path 和 text 时，可通过 bar 插槽完全自定义导航入口。中间按钮仍是一个 t-tabbar-item，点击后会自动切换到它对应的内容。

vue
<template>
	<t-tabbar v-model="current">
		<t-tabbar-item icon-path="grid"
					   selected-icon-path="grid-fill"
					   text="首页">
			<view :class="[`f b`]"></view>
		</t-tabbar-item>

		<t-tabbar-item>
			<view :class="[`f b`]">
				<t-text>发布内容</t-text>
			</view>
			<template #bar>
				<view :class="[`twhr-50 fc mt-n20 tbg-pn`]"
					  hover-class="o-0.7">
					<t-icon :fore="true"
							name="plus"
							:class="[`sfwb s-12`]"
							type="primary"></t-icon>
					<t-text :fore="true"
							:class="[`s-12`]"
							type="primary">发布</t-text>
				</view>
			</template>
		</t-tabbar-item>

		<t-tabbar-item icon-path="account"
					   selected-icon-path="account-fill"
					   text="我的">
			<view :class="[`f b`]"></view>
		</t-tabbar-item>
	</t-tabbar>
</template>

<script setup lang="uts">
	const current = ref<number>(0)
</script>

t-tabbar Props ​

属性名说明类型默认值
v-model / model-value当前激活的 t-tabbar-item 索引，从 0 开始number0
type激活项主题类型，可选 info、primary、error、warning、successstring'primary'
effect主题效果，可选 normal、dark、light、plainstring'normal'
disabled是否禁用booleanfalse
hover是否启用点击效果booleanfalse
size通用尺寸属性string'medium'
path通用跳转路径属性string''

t-tabbar Events ​

事件名说明回调参数
update:modelValue当前激活项变化时触发；通常由 v-model 自动处理index: number

t-tabbar Slots ​

插槽名说明
default放置 t-tabbar-item 子组件