鸿蒙js开发模式2 鸿蒙js开发模式下的底部菜单栏配置 原创

效果图：

1.页面布局

<div class="pagediv">
    <!--鸿蒙配置底部菜单栏,必须嵌套在父容器中-->
    <div class="bottommenusdiv">
        <block for="{{menus}}">
            <div class="menusdiv" onclick="onclickmenu({{$idx}})">
                <div class="upmenusdiv">
                    <image class="imgdiv" src="{{isonclick==$idx?$item.img1:$item.img2}}"></image>
                </div>
                <div class="downmenusdiv">
                    <text class="{{isonclick==$idx?'texton':'textoff'}}">{{$item.text}}</text>
                </div>
            </div>
        </block>
    </div>
</div>

2.csss属性配置

.pagediv{
    width: 100%;
    height: 1200px;
    background-color: snow;
}
.bottommenusdiv{
    width: 100%;
    height: 120px;
    border: 1px solid black;
    background-color: white;
    position: fixed;
    bottom: 0px;
    left: 0px;
    display: flex;
    justify-content: space-around;
    align-items: center;
}
.menusdiv{
    width: 22%;
    height: 90%;
/*    border: 1px solid blue;*/
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}
.upmenusdiv{
    width: 60%;
    height: 50%;
/*    border: 1px solid #FF3824;*/
    display: flex;
    justify-content: center;
    align-items: center;
}
.imgdiv{
    width: 50px;
    height: 45px;
}
.downmenusdiv{
    width: 60%;
    height: 35%;
/*    border: 1px solid slateblue;*/
    display: flex;
    justify-content: center;
    align-items: center;
}
.texton{
    color: #0000FF;
    font-size: 30px;
    font-weight: bold;
}
.textoff{
    color: #8B8989;
    font-size: 30px;
    font-weight: 200;
}

3.

data: {
        //定义底部菜单栏数据模型
        menus:[{text:"首页",img1:"./common/ones.png",img2:"./common/oneu.png"},
               {text:"通讯录",img1:"./common/tels.png",img2:"./common/telu.png"},
               {text:"消息",img1:"./common/mess.png",img2:"./common/mesu.png"},
               {text:"我的",img1:"./common/mys.png",img2:"./common/myu.png"}],
        isonclick:0
    },
    onclickmenu(index){
        this.isonclick = index;
    }