Harmony在线教育app平台开发开发日志——day6

底部导航栏组件开发

主页面代码

<!--主页面的hml-->
<!--start 引入底部导航栏组件 start-->
    <element name='comp' src='../navbar/navbar.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>

//主页面的js
export default {
    data: {
        title: "",
        //定义菜单项的数据源
        menus:[{"text":"房间","inActiveImg":"common/icon/home-active.png"},
               {"text":"设备","inActiveImg":"common/icon/study.png","activeImg":"common/icon/study-active.png"},
               {"text":"消息","inActiveImg":"common/icon/message.png","activeImg":"common/icon/message-active.png",showBadge:true,msgNum:"100"},
               {"text":"设置","inActiveImg":"common/icon/my.png","activeImg":"common/icon/my-active.png"}],
    },
    //响应导航栏菜单切换事件
    changePage(e){
        this.title = e.detail.index;
        console.error("title="+this.title);
    },
    onInit() {
        this.title = this.$t('strings.world');
    }
}

/*主页面的css*/
.container {
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.main{
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.title {
    font-size: 40px;
    color: #000000;
    opacity: 0.9;
}

底部导航栏代码

<!--自定义组件的hml-->
<!--start 导航栏必须嵌套到父的视图容器 start-->
<div id="bottomNavBar" class="bottomNavBar"
     style="background-color : {{ backgroundColor }}; border-top-color : {{ borderColor }}; border-top-width : {{ borderTopWidth }}; border-bottom-width : {{ borderBottomWidth }}; bottom : {{ bottom }};">
    <block for="{{ menuData }}">
        <div class="menuItem" onclick="changemenu({{ $idx }})">
            <div class="badgediv">
                <badge class="badge" config="{{ badgeconfig }}" placement="rightTop" visible="{{ $item.showBadge }}"
                       count="{{ $item.msgNum }}" maxcount="99">
                    <image class="cimg"
                           src="{{ defaultIndex == $idx ? $item.activeImg : $item.inActiveImg }}"
                           onclick="changemenu({{ $idx }})">
                    </image>
                </badge>
            </div>
            <text class="itemText"
                  style="color : {{ defaultIndex == $idx ? itemTextActiveColor : itemTextInActiveColor }};">{{
                $item.text }}
            </text>
        </div>
    </block>
</div>
<!--end 导航栏必须嵌套到父的视图容器 end-->

//自定义组件的js
export default {
props: {
menuData: [], //定义菜单项的数据属性，菜单内容由该数据生成
defaultIndex: { //菜单的默认索引
default: 0
},
itemTextActiveColor: { //菜单选中的时候的文本颜色
default: '#1296db'
},
itemTextInActiveColor: { //菜单非选中的时候的文本颜色
default: '#bfbfbf'
},
backgroundColor: { //导航栏的背景色
default: '#ffffff'
},
borderTopWidth: { //底部导航栏顶部的一条分割线宽度，为0代表没有
default: '2px'
},
borderBottomWidth: { //顶部导航栏顶部的一条分割线宽度，为0代表没有
default: '2px'
},
borderColor: { //导航栏分割线颜色
default: '#bfbfbf'
},
isBottom:
{ //是否是底部导航栏
default
:
true
},
    badgeconfig: {
        default: {
            badgeColor: "#fa2a2d",
            textColor: "#ffffff",
        }
    }
},
    data: {
        bottom: null
    },
    //自定义事件eventNavItemChange的响应
    changemenu(index)
    {
        //赋值
        this.defaultIndex = index;
        console.log("当前的值为:" + this.defaultIndex);
        this.$emit('eventNavItemChange', {
            index: index
        });
    },
    onInit() {
        if (this.isBottom) { //设置为底部导航栏
            this.bottom = '0px';
            this.borderBottomWidth = '0px'; //底部导航栏只有上分隔线没有下分隔线
        } else { //设置为顶部部导航栏
            this.bottom = null;
            this.borderTopWidth = '0px'; //顶部导航栏只有下分隔线没有上分隔线
        }
    }
}

/*自定义组件的css*/
/*导航栏最外层容器的样式*/
.bottomNavBar{
    width: 100%;
    border-top-style: solid;
    position: absolute;
    left: 0px;
    background-color: #ffffff;
    display: flex;
    justify-content: space-around;
    z-index: 1;
}
/*导航栏中菜单项的样式*/
.menuItem{
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    padding: 10px 0px;
}
/*badge外面套的div样式*/
.badgediv{
    width: 36px;
    height: 36px;
}
/*菜单项中文字的样式*/
.itemText{
    font-size: 12px;
}
/*菜单项中图片的样式*/
.cimg{
    width: 36px;
    height: 36px;
}