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

在鸿蒙开发环境下有一下两个小点需要读者引起注意

1.布局的时候一定要启用flex按列布局 (这里与微信小程序js开发有一定区别)如下图:

2.2.鸿蒙布局中不能直接写值 必须用<text></text>包裹住  而微信小程序则并不要求.

完整过程如下:

1.在data中定义数据模型

data: {
    dataarrs:["麒麟","鲲鹏","升腾","凌霄","玄机","紫薇","天市","太微","饕餮"]
}

2.在视图层渲染布局:

<div class="pageview">
 <div class="topview">
     <div class="topcell">
         <text class="txt">鸿蒙</text>
     </div>
     <div class="topcell">
         <text class="txt">弹性</text>
     </div>
     <div class="topcell">
         <text class="txt">布局</text>
     </div>
 </div>
    <div class="middleview">
        <div class="midbox">
            <block for="{{dataarrs}}">
                <div class="gong">
                    <text class="txt1">
                        {{$item}}
                    </text>
                </div>
            </block>
        </div>
    </div>
    <div class="bottomview">
        <div class="bottombox">
        <text class="txt2">
           {{"中华有为"}}
        </text>
       </div>
        </div>
    </div>

3.css弹性布局对样式的属性设置

.pageview{
    width: 100%;
    height: 100%;
    background-color: cornflowerblue;
    /**启用flex布局**/
    display: flex;
    /**方向按列**/
    flex-direction: column;
}
.topview{
    width: 100%;
    height: 20%;
    background-color: deepskyblue ;
    display: flex;
    /**垂直居中**/
    align-items: center;
     /**水平居中**/
    justify-content: center;
}
.middleview{
    width: 100%;
    height: 70%;
    background-color: cornflowerblue;
    display: flex;
    align-items: center;
    justify-content: center;
}
.bottomview{
    width: 100%;
    height: 10%;
    background-color: powderblue;
}
.topcell{
    width: 30%;
    height: 60%;
    border: 5px solid black ;
    margin: 6px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.txt{
    font-size: 50px;
    font-weight:bold;

}
.midbox{
    width: 80%;
    height: 70%;
    /*8border:5px solid black;**/
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;

}
.gong{
    width: 30%;
    height: 30%;
    border:4px solid black;
    margin: 3px;
    border-radius: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.txt1{
    font-size: 50px;
    font-weight:bold;
}
.bottombox{
    width: 100%;
    height: 100%;
    border:2px solid black;
    display: flex;
align-items: center;
    justify-content: center;
}
.txt2{  font-size: 50px;
    font-weight:bold;
    }

最终效果图如下: