HarmonyOS 底部导航栏组件 rc_concave_tabbar 使用指南

前言

rc_concave_tabbar 是一个提供凹陷圆形动画效果的 HarmonyOS 底部导航栏组件库。本文介绍其使用方法及设计理念。

组件特性

• 流畅动画：支持流畅的凹陷圆形切换动画效果
• 高度定制：支持自定义背景色、字体颜色、高度等多种样式配置
• 灵活配置：支持全局配置和单项配置，满足不同场景需求
• 简单易用：API 设计简洁，快速集成到 HarmonyOS 项目中
• 性能优化：动画流畅，性能表现优异

适用场景

• 电商类应用底部导航
• 社交类应用主页面切换
• 内容资讯类应用导航栏
• 工具类应用多功能入口
• 需要精美底部导航动效的各类应用

使用说明

安装组件

rc_concave_tabbar 已发布到 OpenHarmony 三方库中心仓库中，访问地址为：https://ohpm.openharmony.cn/#/cn/detail/rc\_concave\_tabbar

安装步骤

1. 添加依赖

在项目根目录下执行以下命令：

 ohpm install rc_concave_tabbar 

2. 基本使用

步骤一：引入相关依赖

在需要使用组件的页面文件中，导入必要的类型和组件：

import{ TabMenusInterfaceIRequired, TabsConcaveCircle }from'rc_concave_tabbar'

步骤二：创建菜单数据

定义状态变量和菜单配置数据：

// 当前选择的菜单
@State currentIndex:number=0;
// 菜单数据
@State TabsMenu: TabMenusInterfaceIRequired[]=[{
 text:,
 :$r(),
 :$r()
},{
 :,
 :$r(),
 :$r()
},{
 :,
 :$r(),
 :$r()
},{
 :,
 :$r(),
 :$r()
}];