更新记录

1.0.0（2025-11-08） 下载此版本

兼容鸿蒙

平台兼容性

uni-app(4.81)

Tabbar 组件使用说明

概述

自定义底部导航栏组件，支持中间凸起按钮和消息未读角标功能。

功能特性

• ✅ 5 个 tab 页面切换（健康、消息、守护、家庭、我的）
• ✅ 中间守护 tab 凸起设计，带动态眼睛效果
• ✅ 支持消息未读角标（红色圆点+白色数字）
• ✅ 支持本地切换模式和路由切换模式
• ✅ 平滑切换动画

Props

useLocalSwitch

• 类型: Boolean
• 默认值: false
• 说明: 是否使用本地切换模式。如果为 true，切换 tab 时会发出 tab-change 事件而不是进行路由跳转

badges

• 类型: Object
• 默认值: {}
• 说明: 未读消息角标配置，key 为页面路径，value 为未读数
• 示例:

{
  '/pages/message/message': 5,
  '/pages/health/health': 2,
  '/pages/family/family': 10,
  '/pages/my/my': 99
}

Events

tab-change

• 参数: (pagePath: string) - 切换到的页面路径
• 触发时机: 当 useLocalSwitch 为 true 时，点击 tab 触发
• 说明: 用于父组件监听 tab 切换事件

基本使用

1. 不带角标（默认模式）

<template>
  <view>
    <Tabbar />
  </view>
</template>

<script setup>
import Tabbar from "@/components/tabbar/tabbar.vue";
</script>

2. 带消息未读角标

<template>
  <view>
    <Tabbar :badges="badgeData" />
  </view>
</template>

<script setup>
import { ref } from "vue";
import Tabbar from "@/components/tabbar/tabbar.vue";

const badgeData = ref({
  "/pages/message/message": 5, // 消息页显示 5
  "/pages/health/health": 2, // 健康页显示 2
  "/pages/family/family": 120, // 家庭页显示 99+ (超过99)
});
</script>

3. 本地切换模式（用于自定义页面切换）

<template>
  <view>
    <Tabbar
      :use-local-switch="true"
      :badges="badgeData"
      @tab-change="handleTabChange"
    />
  </view>
</template>

<script setup>
import { ref } from "vue";
import Tabbar from "@/components/tabbar/tabbar.vue";

const badgeData = ref({
  "/pages/message/message": 3,
});

const handleTabChange = (pagePath) => {
  console.log("切换到页面：", pagePath);
  // 在这里处理自定义的页面切换逻辑
};
</script>

4. 动态更新角标数量

<template>
  <view>
    <Tabbar :badges="badgeData" />
  </view>
</template>

<script setup>
import { ref, onMounted } from "vue";
import Tabbar from "@/components/tabbar/tabbar.vue";

const badgeData = ref({
  "/pages/message/message": 0,
});

// 模拟接收新消息
onMounted(() => {
  // 3秒后更新消息数
  setTimeout(() => {
    badgeData.value["/pages/message/message"] = 5;
  }, 3000);
});
</script>

5. 结合 Pinia 状态管理

<template>
  <view>
    <Tabbar :badges="badgeData" />
  </view>
</template>

<script setup>
import { computed } from "vue";
import { useMessageStore } from "@/stores/message";
import Tabbar from "@/components/tabbar/tabbar.vue";

const messageStore = useMessageStore();

// 从store中获取未读消息数
const badgeData = computed(() => ({
  "/pages/message/message": messageStore.unreadCount,
  "/pages/health/health": messageStore.healthNoticeCount,
  "/pages/family/family": messageStore.familyNoticeCount,
}));
</script>

角标显示规则

1. 数字范围:

   • 0: 不显示角标
   • 1-99: 显示实际数字
   • >99: 显示 "99+"

2. 样式规范:

   • 背景色: #FF3B30 (红色)
   • 文字色: #FFFFFF (白色)
   • 位置: 图标右上角
   • 形状: 圆形（固定尺寸）
   • 尺寸: 16px x 16px（固定宽高）

3. 显示位置:

   • 左侧 tab（健康、消息）: 支持角标 ✅
   • 中间 tab（守护）: 不支持角标 ❌
   • 右侧 tab（家庭、我的）: 支持角标 ✅

注意事项

1. 中间凸起的守护 tab 不支持角标显示
2. 角标数据是响应式的，可以实时更新
3. 角标仅在数字大于 0 时显示
4. 建议使用 Pinia 进行全局的未读消息管理
5. 在 HarmonyOS 系统中测试确保角标显示正常