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

1、在date中定义数据模型

data: {
        title:"我是一个标题",
        arrs:["text1","text2","text3","text4","text5","text6","text7","text8","text9"],
        text1:"鸿蒙",
        text2:"页面",
        text3:"布局"
    }

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>

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;
}