【弧形导航栏】中间凸起按钮和消息未读角标，支持鸿蒙

分类：鸿蒙Next

鸿蒙征文

Tabbar 组件使用说明

概述

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

插件地址：https://ext.dcloud.net.cn/plugin?id=25774

功能特性

✅ 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>

角标显示规则

数字范围:
- 0: 不显示角标
- 1-99: 显示实际数字
- >99: 显示 "99+"
样式规范:
- 背景色: #FF3B30 (红色)
- 文字色: #FFFFFF (白色)
- 位置: 图标右上角
- 形状: 圆形（固定尺寸）
- 尺寸: 16px x 16px（固定宽高）
显示位置:
- 左侧 tab（健康、消息）: 支持角标 ✅
- 中间 tab（守护）: 不支持角标 ❌
- 右侧 tab（家庭、我的）: 支持角标 ✅