NavBarOhos

简介

基于OpenHarmony SDK开发封装自定义组件（创建的OpenHarmony工程里时不带java的），该组件为应用开发中非常常用的TAB导航栏，默认为底部导航栏，也可以设置为顶部导航栏，同时支持红点和数字提醒两种角标提醒。

项目工程结构

运行效果图

底部导航栏效果图

顶部导航栏效果图

设置导航栏背景色和文字激活色效果图

使用示例：

1.下载组件代码navbar目录到本地, 添加到你的项目的js目录下

2.通过element引入navbar组件

<!--start 引入导航栏组件 start-->
<element name='comp' src='../../../navbar/pages/index/index.hml'></element>
<!--end 引入导航栏组件 end-->
<!--start 引入需要嵌套的子页面组件 start-->
<element name='page1' src='../page1/page1.hml'></element>
<element name='page2' src='../page2/page2.hml'></element>
<element name='page3' src='../page3/page3.hml'></element>
<element name='page4' src='../page4/page4.hml'></element>
<!--end 引入需要嵌套的子页面组件 end-->
<div class="container">
<!--start 加载导航栏组件 start-->
    <comp id = "selfDefineChild" menu-data="{{ menus }}"  default-index="1"  @event-nav-item-change="changePage" ></comp>
<!--end 加载导航栏组件 end-->
<!--start 根据导航栏菜单选中动态加载对应的内嵌子页面 start-->
    <block if="{{this.$child('selfDefineChild').defaultIndex==0}}">
        <page1></page1>
    </block>
    <block if="{{this.$child('selfDefineChild').defaultIndex==1}}">
        <page2></page2>
    </block>
    <block if="{{this.$child('selfDefineChild').defaultIndex==2}}">
        <page3></page3>
    </block>
    <block if="{{this.$child('selfDefineChild').defaultIndex==3}}">
        <page4></page4>
    </block>
<!--end 根据导航栏菜单选中动态加载对应的内嵌子页面 end-->
</div>

3、在js文件中定义菜单数据

data: {
    //定义菜单项的数据源
        menus:[{"text":"房间","inActiveImg":"common/images/home.png","activeImg":"common/images/home_active.png",showBadge:"true",msgNum:"5"},
               {"text":"设备","inActiveImg":"common/images/device.png","activeImg":"common/images/device_active.png"},
               {"text":"消息","inActiveImg":"common/images/msg.png","activeImg":"common/images/msg_active.png",showBadge:"true",msgNum:"100"},
               {"text":"设置","inActiveImg":"common/images/settings.png","activeImg":"common/images/settings_active.png"}],

},

属性说明：

<span id = “anchor”>表1 menuDataConfig</span>

<span id = “anchor2”>表2 badgeconfig</span>

回调事件：