前言
rc_concave_tabbar 是一个功能强大、样式精美的 HarmonyOS 底部导航栏组件库,提供凹陷圆形动画效果样式,适用于多种场景。下面将介绍其使用方法以及核心设计理念。
组件特性
- 流畅动画:支持流畅的凹陷圆形切换动画效果
- 高度定制:支持自定义背景色、字体颜色、高度等多种样式配置
- 灵活配置:支持全局配置和单项配置,满足不同场景需求
- 简单易用:API 设计简洁,快速集成到 HarmonyOS 项目中
- 性能优化:动画流畅,性能表现优异
适用场景
电商类应用底部导航、社交类应用主页面切换、内容资讯类应用导航栏、工具类应用多功能入口,以及需要精美底部导航动效的各类应用。
使用说明
安装组件
该组件已发布到 OpenHarmony 三方库中心仓库中。在项目根目录下执行以下命令即可安装:
ohpm install rc_concave_tabbar
基本使用
在需要使用组件的页面文件中,导入必要的类型和组件:
import { TabMenusInterfaceIRequired, TabsConcaveCircle } from 'rc_concave_tabbar'
接下来定义状态变量和菜单配置数据。这里 currentIndex 用于追踪当前选中的菜单索引,TabsMenu 则是菜单配置数组,每个对象代表一个菜单项:
// 当前选择的菜单
@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(), : $r() },
{ : , : $r(), : $r() }
];


