NavBarOhos

<!--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>

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"}],

},