鸿蒙js开发模式1 鸿蒙js开发模式下的页面布局原创

lsfzzf

发布于 2021-1-12 17:47

浏览

0收藏

1、在date中定义数据模型

data: {
        title:"我是一个标题",
        arrs:["text1","text2","text3","text4","text5","text6","text7","text8","text9"],
        text1:"鸿蒙",
        text2:"页面",
        text3:"布局"
    }1.
2.
3.
4.
5.
6.
7.

鸿蒙js开发模式1 鸿蒙js开发模式下的页面布局-鸿蒙开发者社区

2、使用<div>标签，对页面进行布局

<div class="pagediv">
    <div class="topdiv">
        <text class="textdiv">{{title}}</text>
    </div>
    <div class="middlediv">
        <block for="{{arrs}}">
            <div class="box">
                <text class="boxtxt">{{$item}}</text>
            </div>
        </block>
    </div>
    <div class="buttomdiv">
        <div class="buttomboxdiv">
            <text class="buttomboxtxt">{{text1}}</text>
        </div>
        <div class="buttomboxdiv">
            <text class="buttomboxtxt">{{text2}}</text>
        </div>
        <div class="buttomboxdiv">
            <text class="buttomboxtxt">{{text3}}</text>
        </div>
    </div>
</div>1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.

3、css属性设置

.pagediv{
    width: 100%;
    height: 1500px;
    background-color: cornsilk;
    /**启用flex布局**/
    display: flex;
    /**布局方向为按列布局**/
    flex-direction: column;
}
.topdiv{
    width: 100%;
    height: 10%;
    background-color: #AECAFA;
    /**启用flex布局**/
    display: flex;
    /**水平居中**/
    justify-content: center;
    /**垂直居中**/
    align-items: center;
}
.middlediv{
    width: 100%;
    height: 60%;
    background-color: antiquewhite;
    display: flex;
    justify-content: center;
    align-items: center;
    /**自动换行**/
    flex-wrap: wrap;
}
.box{
    width: 31%;
    height: 32%;
    background-color: #C8FFDB;
    border: 3px solid black;
    border-radius: 20px;
    margin: 5px;
    display: flex;
    justify-content: center;
    align-items: center;
}
.textdiv{
    font-size: 50px;
    color: black;
    font-weight: bold;
}
.boxtxt{
    font-size: 45px;
    color: black;
    font-weight: bold;
}
.buttomdiv{
    width: 100%;
    height: 15%;
    background-color: white;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: row;
}
.buttomboxdiv{
    width: 30%;
    height: 80%;
    background-color: lavender;
    border: 5px solid black;
    border-radius: 20px;
    margin: 5px;
    display: flex;
    justify-content: center;
    align-items: center;
}
.buttomboxtxt{
    font-size: 80px;
    color: #7A9AFF;
    font-weight: 800;
}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.
57.
58.
59.
60.
61.
62.
63.
64.
65.
66.
67.
68.
69.
70.
71.
72.
73.
74.
75.
76.