外观
Tabbar 底部导航栏
约 2766 字大约 9 分钟
2025-10-31
该组件用于底部导航栏，支持多种样式和交互方式，包括基础导航、徽标显示、自定义图标、中间凸起按钮等功能。
基本使用
通过 v-model 绑定当前选中的标签索引，配合 @change 事件监听切换。
<template>
<view class="u-page__item">
<view class="u-page__item__title">
<text class="u-page__item__title-text">基础功能</text>
</view>
<un-tabbar v-model="value1" @change="change1" :fixed="false" :placeholder="false"
:safeAreaInsetBottom="false">
<un-tabbar-item text="首页" icon="home"></un-tabbar-item>
<un-tabbar-item text="放映厅" icon="photo"></un-tabbar-item>
<un-tabbar-item text="直播" icon="play-right" ></un-tabbar-item>
<un-tabbar-item text="我的" icon="account"></un-tabbar-item>
</un-tabbar>
</view>
</template>
<script setup lang="ts">
import { ref } from 'vue'
const value1 = ref(0)
const change1 = (e: number) => {
value1.value = e
console.log('change1', e);
}
</script>显示徽标
通过 dot 属性显示圆点徽标，通过 badge 属性显示数字徽标。
<template>
<view class="u-page__item">
<view class="u-page__item__title">
<text class="u-page__item__title-text">显示徽标</text>
</view>
<un-tabbar v-model="value2" :placeholder="false" @change="change2" :fixed="false"
:safeAreaInsetBottom="false">
<un-tabbar-item text="首页" icon="home" dot></un-tabbar-item>
<un-tabbar-item text="放映厅" icon="photo" badge="3"></un-tabbar-item>
<un-tabbar-item text="直播" icon="play-right"></un-tabbar-item>
<un-tabbar-item text="我的" icon="account"></un-tabbar-item>
</un-tabbar>
</view>
</template>
<script setup lang="ts">
import { ref } from 'vue'
const value2 = ref(1)
const change2 = (name: number | string) => {
value2.value = name as number
}
</script>匹配标签的名称
通过 name 属性为每个标签设置唯一标识，可以与 v-model 绑定的值进行匹配。
<template>
<view class="u-page__item">
<view class="u-page__item__title">
<text class="u-page__item__title-text">匹配标签的名称</text>
</view>
<un-tabbar :placeholder="false" v-model="value3" @change="change3" :fixed="false"
:safeAreaInsetBottom="false">
<un-tabbar-item text="首页" icon="home" name="home"></un-tabbar-item>
<un-tabbar-item text="放映厅" icon="photo" name="photo"></un-tabbar-item>
<un-tabbar-item text="直播" icon="play-right" name="play-right"></un-tabbar-item>
<un-tabbar-item text="我的" name="account" icon="account"></un-tabbar-item>
</un-tabbar>
</view>
</template>
<script setup lang="ts">
import { ref } from 'vue'
const value3 = ref('play-right')
const change3 = (name: number | string) => {
value3.value = name as string
}
</script>默认插槽
通过默认插槽可以完全自定义标签项的内容，插槽提供 active 参数表示当前是否激活状态。
<template>
<view class="u-page__item">
<view class="u-page__item__title">
<text class="u-page__item__title-text">默认插槽</text>
</view>
<un-tabbar
v-model="value4"
@change="change4"
:fixed="false"
:placeholder="false"
:safeAreaInsetBottom="false"
>
<un-tabbar-item text="首页" icon="home"></un-tabbar-item>
<un-tabbar-item text="朋友" icon="photo"></un-tabbar-item>
<un-tabbar-item>
<template #default="{ active }">
<un-icon :name="active == true ? 'plus-circle-fill' : 'plus-circle'" size="40" color="#333"></un-icon>
</template>
</un-tabbar-item>
<un-tabbar-item text="消息" icon="play-right"></un-tabbar-item>
<un-tabbar-item text="我的" icon="account"></un-tabbar-item>
</un-tabbar>
</view>
</template>
<script setup lang="ts">
import { ref } from 'vue'
const value4 = ref(0)
const change4 = (name: number | string) => {
value4.value = name as number
}
</script>图标插槽
通过 icon 插槽可以自定义图标内容，根据 active 参数显示不同的图标。
<template>
<view class="u-page__item">
<view class="u-page__item__title">
<text class="u-page__item__title-text">icon插槽</text>
</view>
<un-tabbar
v-model="value4"
@change="change4"
:fixed="false"
:placeholder="false"
:safeAreaInsetBottom="false"
>
<un-tabbar-item text="首页">
<template #icon="{ active }">
<image v-if="active" src="@/static/uview/common/签到.png" style="width: 24px; height: 24px;"></image>
<image v-else src="@/static/uview/common/视频.png" style="width: 24px; height: 24px;"></image>
</template>
</un-tabbar-item>
<un-tabbar-item text="放映厅">
<template #icon="{ active }">
<image v-if="active" src="@/static/uview/common/动态.png" style="width: 24px; height: 24px;"></image>
<image v-else src="@/static/uview/common/备份.png" style="width: 24px; height: 24px;"></image>
</template>
</un-tabbar-item>
<un-tabbar-item text="直播">
<template #icon="{ active }">
<image v-if="active" src="@/static/uview/common/美图.png" style="width: 24px; height: 24px;"></image>
<image v-else src="@/static/uview/common/服务.png" style="width: 24px; height: 24px;"></image>
</template>
</un-tabbar-item>
<un-tabbar-item text="我的">
<template #icon="{ active }">
<image v-if="active" src="@/static/uview/common/视频.png" style="width: 24px; height: 24px;"></image>
<image v-else src="@/static/uview/common/AI专区.png" style="width: 24px; height: 24px;"></image>
</template>
</un-tabbar-item>
</un-tabbar>
</view>
</template>自定义颜色
通过 activeColor 和 inactiveColor 属性自定义激活和未激活状态的颜色。
<template>
<view class="u-page__item">
<view class="u-page__item__title">
<text class="u-page__item__title-text">自定义颜色</text>
</view>
<un-tabbar
v-model="value4"
@change="change4"
:fixed="false"
:placeholder="false"
:safeAreaInsetBottom="false"
activeColor="#d81e06"
inactiveColor="#555"
>
<un-tabbar-item text="首页" icon="home"></un-tabbar-item>
<un-tabbar-item text="放映厅" icon="photo"></un-tabbar-item>
<un-tabbar-item text="直播" icon="play-right"></un-tabbar-item>
<un-tabbar-item text="我的" icon="account"></un-tabbar-item>
</un-tabbar>
</view>
</template>拦截切换事件
通过 @change 事件可以拦截标签切换，执行自定义逻辑。
<template>
<view class="u-page__item">
<view class="u-page__item__title">
<text class="u-page__item__title-text">拦截切换事件(点击第二个标签)</text>
</view>
<un-tabbar
ref="tabbar5"
v-model="value5"
:fixed="false"
:safeAreaInsetBottom="false"
:placeholder="false"
@change="change5"
:bgColor="bgColor"
>
<un-tabbar-item text="首页" icon="home"></un-tabbar-item>
<un-tabbar-item text="放映厅" icon="photo"></un-tabbar-item>
<un-tabbar-item text="直播" icon="play-right"></un-tabbar-item>
<un-tabbar-item text="我的" icon="account"></un-tabbar-item>
</un-tabbar>
</view>
</template>
<script setup lang="ts">
import { ref } from 'vue'
const value5 = ref(0)
const bgColor = ref('#ffffff')
const tabbar5 = ref<UnTabbarComponentPublicInstance | null>(null)
const change5 = async (name: number | string) => {
if(tabbar5.value != null){
const size = await tabbar5.value.getRect()
console.log('tabbar5',size)
}
if (name == 1){
return uni.showToast({
title: '请您先登录'
})
}else{
value5.value = name as number
}
if (name == 2){
bgColor.value = '#eee'
}else{
bgColor.value = '#ffffff'
}
}
</script>标签模式
通过 mode="tag" 可以创建标签样式的导航栏，适合用于分类切换场景。
<template>
<view class="u-page__item">
<view class="u-page__item__title">
<text class="u-page__item__title-text">标签模式</text>
</view>
<un-tabbar mode="tag" v-model="value7" :placeholder="false" @change="change7"
:fixed="false" :safeAreaInsetBottom="false">
<un-tabbar-item text="首页"></un-tabbar-item>
<un-tabbar-item text="放映厅"></un-tabbar-item>
<un-tabbar-item text="直播"></un-tabbar-item>
<un-tabbar-item text="我的"></un-tabbar-item>
</un-tabbar>
<view style="height:10px;"></view>
<un-tabbar mode="tag" v-model="value7" :placeholder="false" @change="change7" :fixed="false"
:safeAreaInsetBottom="false">
<un-tabbar-item text="首页" icon="home" customStyle="margin: 2px"></un-tabbar-item>
<un-tabbar-item text="放映厅" icon="photo" customStyle="margin: 2px"></un-tabbar-item>
<un-tabbar-item text="直播" icon="play-right" customStyle="margin: 2px"></un-tabbar-item>
<un-tabbar-item text="我的" icon="account" customStyle="margin: 2px"></un-tabbar-item>
</un-tabbar>
<view style="height:10px;"></view>
<un-tabbar mode="tag" v-model="value7" :placeholder="false" @change="change7" :fixed="false"
:safeAreaInsetBottom="false">
<un-tabbar-item icon="home" dot></un-tabbar-item>
<un-tabbar-item icon="photo"></un-tabbar-item>
<un-tabbar-item icon="play-right"></un-tabbar-item>
<un-tabbar-item icon="account"></un-tabbar-item>
</un-tabbar>
</view>
</template>
<script setup lang="ts">
import { ref } from 'vue'
const value7 = ref(3)
const change7 = (name: number | string) => {
value7.value = name as number
}
</script>悬浮胶囊标签栏
通过 shape="circle" 可以创建圆形的胶囊样式标签栏，适合悬浮显示。
<template>
<view class="u-page__item" style="background-color: #f3f4f6;">
<view class="u-page__item__title">
<text class="u-page__item__title-text">悬浮胶囊标签栏(迷你样式)</text>
</view>
<un-tabbar ref="tabbar6" v-model="value6" bottom="0" :fixed="false" shape="circle" :fit="true" @change="change6" height="34">
<un-tabbar-item icon="home" customStyle="padding:0 20px"></un-tabbar-item>
<un-tabbar-item icon="photo" customStyle="padding:0 20px"></un-tabbar-item>
<un-tabbar-item icon="play-right" customStyle="padding:0 20px"></un-tabbar-item>
</un-tabbar>
</view>
<view class="u-page__item" style="background-color: #f3f4f6;">
<view class="u-page__item__title">
<text class="u-page__item__title-text">悬浮胶囊标签栏</text>
</view>
<un-tabbar v-model="value6" :fixed="false" shape="circle" @change="change6">
<un-tabbar-item text="首页" icon="home"></un-tabbar-item>
<un-tabbar-item text="放映厅" icon="photo"></un-tabbar-item>
<un-tabbar-item text="直播" icon="play-right"></un-tabbar-item>
<un-tabbar-item text="我的" icon="account"></un-tabbar-item>
</un-tabbar>
</view>
</template>
<script setup lang="ts">
import { ref } from 'vue'
const value6 = ref(0)
const tabbar6 = ref<UnTabbarComponentPublicInstance | null>(null)
const change6 = (name: number | string) => {
value6.value = name as number
}
</script>中间凸起按钮
通过 middle 插槽可以创建中间凸起的特殊按钮，常用于发布功能。
<template>
<un-page customStyle="padding: 0">
<un-tabbar>
<un-tabbar-item text="首页" icon="home" url="/pages/componentsB/tabbar/tabbar"></un-tabbar-item>
<un-tabbar-item text="放映厅" icon="photo" url="/pages/componentsB/tabbar/tabbar1"></un-tabbar-item>
<un-tabbar-item text="发布">
<template #middle>
<view class="middle-button">
<un-icon name="plus" color="#fff" size="20"></un-icon>
</view>
</template>
</un-tabbar-item>
<un-tabbar-item text="直播" icon="play-right" url="/pages/componentsB/tabbar/tabbar2"></un-tabbar-item>
<un-tabbar-item text="我的" icon="account" url="/pages/componentsB/tabbar/tabbar3"></un-tabbar-item>
</un-tabbar>
</un-page>
</template>
<style lang="scss">
.middle-button{
width: 40px;
height: 40px;
border-radius: 100px;
background-color: #3c9cff;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
</style>固定在底部
通过 fixed 和 placeholder 属性可以将标签栏固定在底部，并防止页面内容塌陷。
<template>
<un-tabbar v-model="value6" @change="change6" :fixed="true" :placeholder="true" :safeAreaInsetBottom="true">
<un-tabbar-item text="首页" icon="home"></un-tabbar-item>
<un-tabbar-item text="放映厅" icon="photo"></un-tabbar-item>
<un-tabbar-item text="直播" icon="play-right"></un-tabbar-item>
<un-tabbar-item text="我的" icon="account"></un-tabbar-item>
</un-tabbar>
</template>
<script setup lang="ts">
import { ref } from 'vue'
const value6 = ref(0)
const change6 = (name: number | string) => {
value6.value = name as number
}
</script>API
TabBar Props
| 参数 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| modelValue | 当前匹配项的name | string | number | '' |
| safeAreaInsetBottom | 是否为iPhoneX留出底部安全距离，注意：胶囊模式不支持 | boolean | true |
| bgColor | 背景颜色 | string | '' |
| zIndex | 元素层级z-index | string | number | 1 |
| activeColor | 选中标签的颜色 | string | '' |
| inactiveColor | 未选中标签的颜色 | string | '' |
| activeBgColor | 激活项的背景颜色 | string | null |
| fixed | 是否固定在底部 | boolean | true |
| placeholder | fixed定位固定在底部时，是否生成一个等高元素防止塌陷 | boolean | true |
| shape | 标签栏的形状 | Enum | normal |
| height | 标签栏的高度 | string | number | 50 |
| fit | 是否自适应宽度 | boolean | false |
| bottom | 胶囊标签栏底部边距 | string | number | null |
| mode | 标签模式 | Enum | normal |
| customStyle | 自定义样式 | object | string | '' |
TabBarItem Props
| 参数 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| name | item标签的名称，作为与un-tabbar的value参数匹配的标识符 | string | number | '' |
| icon | uView内置图标或者绝对路径的图片 | string | '' |
| iconSize | 图标大小 | string | number | 24 |
| badge | 右上角的角标提示信息 | string | number | UTSJSONObject | '' |
| dot | 是否显示圆点，将会覆盖badge参数 | boolean | false |
| text | 描述文本 | string | '' |
| disabled | 是否禁用 | boolean | false |
| middleBottom | 中间内容的底部距离 | number | 24 |
| middlePlaceholder | 中间内容的占位高度 | number | 24 |
| url | 页面跳转地址 | string | '' |
| linkType | 页面跳转的类型 | string | redirectTo |
| customStyle | 自定义样式 | string | object | '' |
TabBar Events
| 事件名 | 说明 | 类型 |
|---|---|---|
| change | 切换选项时触发 | Function |
| update:modelValue | 值变化时触发 | Function |
TabBarItem Events
| 事件名 | 说明 | 类型 |
|---|---|---|
| click | 点击选项时触发 | Function |
TabBar Slots
| 插槽名 | 说明 | 参数 |
|---|---|---|
| default | 默认插槽，用于放置tabbar-item | - |
TabBarItem Slots
| 插槽名 | 说明 | 参数 |
|---|---|---|
| default | 默认插槽，用于自定义标签内容 | active: 当前是否激活 |
| icon | 图标插槽，用于自定义图标 | active: 当前是否激活 |
| text | 文本插槽，用于自定义文本 | active: 当前是否激活 |
| middle | 中间凸起按钮插槽 | active: 当前是否激活 |
TabBar Methods
| 方法名 | 说明 | 类型 |
|---|---|---|
| getRect | 获取当前tabbar节点信息，包括height,width,bottom,top,left,right等 | Function |
Scss 变量
| 变量名 | 默认值 | 说明 |
|---|---|---|
| $un-tabbar-bg-color | #ffffff | 标签栏背景颜色 |
| $un-tabbar-content-padding | 2px 0 | 标签栏内容内边距 |
| $un-tabbar-fixed-z-index | 10 | 固定标签栏层级 |
| $un-tabbar-circle-margin | 0 16px | 胶囊标签栏外边距 |
| $un-tabbar-circle-border-radius | 50px | 胶囊标签栏圆角 |
| $un-tabbar-circle-box-shadow | 0 6px 20px rgba(0, 0, 0, 0.1) | 胶囊标签栏阴影 |
| $un-tabbar-item-disabled-opacity | 0.5 | 标签项禁用时透明度 |
| $un-tabbar-item-tag-margin | 6px | 标签模式标签项外边距 |
| $un-tabbar-item-tag-active-bg-color | $color-primary-lighter | 标签模式激活标签项背景颜色 |
| $un-tabbar-item-text-font-size | 12px | 标签项文本字体大小 |
| $un-tabbar-item-text-color | $text-color | 标签项文本颜色 |
| $un-tabbar-item-text-active-color | $color-primary | 标签项激活时文本颜色 |
| $un-tabbar-item-middle-z-index | 11 | 中间凸起内容层级 |
提示
组件内部默认使用 scss 变量，如需修改，请查看 scss 变量使用 文档