前言
rc_concave_tabbar 是专为 HarmonyOS 设计的底部导航栏组件库,主打凹陷圆形动画效果。它支持高度定制和灵活配置,API 设计简洁,能快速集成到项目中。
组件特性
- 流畅动画:支持凹陷圆形切换动画
- 高度定制:可自定义背景色、字体颜色、高度等样式
- 灵活配置:支持全局和单项配置
- 简单易用:快速集成
- 性能优化:动画流畅
适用场景
电商应用底部导航、社交类应用主页面切换、内容资讯类应用导航栏、工具类应用多功能入口等需要精美动效的场景。
使用说明
安装组件
组件已发布到 OpenHarmony 三方库中心仓库。在项目根目录下执行以下命令进行安装:
ohpm install rc_concave_tabbar
引入依赖
在需要使用组件的页面文件中,导入必要的类型和组件:
import { TabMenusInterfaceIRequired, TabsConcaveCircle } from 'rc_concave_tabbar'
创建菜单数据
定义状态变量和菜单配置数据。这里使用 @State 管理当前选中的索引和菜单列表:
// 当前选择的菜单
@State currentIndex: number = 0;
// 菜单数据
@State TabsMenu: TabMenusInterfaceIRequired[] = [
{ text: "首页", image: $r("app.media.index1"), selectImage: $r("app.media.index") },
{ text: "分类", image: $r("app.media.classify1"), selectImage: $r("app.media.classify") },
{ text: "发现", image: $r("app.media.find1"), : $r() },
{ : , : $r(), : $r() }
];


