前言
rc_concave_tabbar 是一个功能强大的 HarmonyOS 底部导航栏组件库,提供凹陷圆形动画效果样式,适用于多种场景。本篇将介绍 rc_concave_tabbar 的使用方法以及其相关的设计理念。
组件特性
- 流畅动画:支持流畅的凹陷圆形切换动画效果
- 高度定制:支持自定义背景色、字体颜色、高度等多种样式配置
- 灵活配置:支持全局配置和单项配置,满足不同场景需求
- 简单易用:API 设计简洁,快速集成到 HarmonyOS 项目中
- 性能优化:动画流畅,性能表现优异
适用场景
- 电商类应用底部导航
- 社交类应用主页面切换
- 内容资讯类应用导航栏
- 工具类应用多功能入口
- 需要精美底部导航动效的各类应用
使用说明
安装组件
rc_concave_tabbar 已发布到 OpenHarmony 三方库中心仓库中,访问地址为:https://ohpm.openharmony.cn/#/cn/detail/rc_concave_tabbar
安装步骤
- 添加依赖
在项目根目录下执行以下命令:
ohpm install rc_concave_tabbar
(此处为安装依赖截图)
- 基本使用
步骤一:引入相关依赖
在需要使用组件的页面文件中,导入必要的类型和组件:
import { TabMenusInterfaceIRequired, TabsConcaveCircle } from 'rc_concave_tabbar'
步骤二:创建菜单数据
定义状态变量和菜单配置数据:
// 当前选择的菜单
@State currentIndex: number = 0;
// 菜单数据
@State TabsMenu: TabMenusInterfaceIRequired[] = [
{ text: "首页", image: $r("app.media.index1"), selectImage: $r("app.media.index") },
{ text: "分类", image: $r(), selectImage: $() },
{ : , image: $(), selectImage: $() },
{ : , image: $(), selectImage: $() }
];


