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

lsfzzf

发布于 2021-1-13 21:53

浏览

0收藏

效果图：

鸿蒙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>1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.

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;
}1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.
54.
55.
56.

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;
    }1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.