Tui Plus Vapor

Appearance

t-tabbar-item ​

底部标签栏项

t-tabbar-item 组件介绍 ​

t-tabbar-item 必须作为 t-tabbar 的直接子组件使用。它既是一个导航项，也是对应 tab 的内容容器；选中项显示默认插槽中的内容，底部栏默认根据图标和文字属性渲染。

t-tabbar-item 平台兼容 ​

HarmonyH5AndroidiOS小程序UTS
✅✅✅✅✅✅

t-tabbar-item 基础用法 ​

使用 icon-path、selected-icon-path 和 text 配置默认导航项。图标名称应使用 t-icon 支持的名称；图标路径包含 / 时会按图片处理。

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

		<t-tabbar-item icon-path="file-text"
					   selected-icon-path="file-text-fill"
					   text="订单">
			<view :class="[`f b p-20`]">
				<t-text>订单内容</t-text>
			</view>
		</t-tabbar-item>
	</t-tabbar>
</template>

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

自定义底部栏内容 ​

使用 bar 插槽替代默认图标和文字。自定义栏位所在的 t-tabbar-item 仍会自动处理点击和 tab 切换，不需要手动更新 current。

vue
<t-tabbar-item>
	<view :class="[`f b p-20`]">
		<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 Props ​

属性名说明类型默认值
icon-path未选中时的图标名称或图片路径string''
selected-icon-path选中时的图标名称或图片路径string''
text默认栏位显示的文字string''
badge-value徽标预留属性string''

t-tabbar-item Events ​

该组件没有独立事件。点击导航项后，通过父组件的 v-model 更新当前索引。

t-tabbar-item Slots ​

插槽名说明
default当前 tab 的页面内容
bar自定义底部导航入口，替代默认图标和文字