鸿蒙js开发教程,js开发1鸿蒙js开发下的页⾯布局页⾯在鸿蒙开发环境下有⼀下两个⼩点需要读者引起注意
1.布局的时候⼀定要启⽤flex按列布局(这⾥与⼩程序js开发有⼀定区别)如下图:
flex布局详细讲解2.2.鸿蒙布局中不能直接写值 必须⽤包裹住  ⽽⼩程序则并不要求.
完整过程如下: 1.在data中定义数据模型
data: {
dataarrs:["麒麟","鲲鹏","升腾","凌霄","⽞机","紫薇","天市","太微","饕餮"]
}
2.在视图层渲染布局:
鸿蒙
弹性
布局
{{$item}}
{{"中华有为"}}
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;
.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;
最终效果图如下:

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。