前言
rc_concave_tabbar 是一个专为 HarmonyOS 设计的底部导航栏组件库,主打凹陷圆形动画效果。它不仅能提供流畅的交互体验,还支持高度定制化的样式配置,非常适合电商、社交或工具类应用的主页导航场景。
安装与集成
组件已发布到 OpenHarmony 三方库中心,直接使用 ohpm 即可引入:
ohpm install rc_concave_tabbar
在需要使用组件的页面文件中,导入必要的类型和组件:
import { TabMenusInterfaceIRequired, TabsConcaveCircle } from 'rc_concave_tabbar'
基础使用
1. 定义菜单数据
首先需要在页面状态中定义菜单数组。每个菜单项包含文本、未选中图标和选中图标资源:
@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"),
selectImage: $r("app.media.find")
},
{
text: "我的",
image: $r("app.media.resumeReview"),
selectImage: $r("app.media.resumeReview1")
}
]
这里 currentIndex 用于追踪当前选中的索引,配合双向绑定实现状态同步。


