- 1valser网站（计算机视觉CV，CG学习交流社区）_valser.org
- 2编程式导航router.push(...)中传参的两种方式query和params及两者区别_router.push params query
- 3Spring Boot+JSP启动报404错误找不到页面_jsp项目部署不能找到登陆界面
- 4实现图像检索系统需要用到哪方面的知识？
- 5华为HCIP-DATACOM题库解析71-110（821）_当两端bfd检测时间间隔分别为30ms
- 6springboot+vue房产中介管理信息系统
- 7java camel命名_Java篇—驼峰命名法(CamelCase)
- 8mac或者linux下安装composer phalcon debug
- 9快速排序算法 C语言实现_c语言完整的快速排序算法
- 10第十八届全国大学生智能车竞赛签到信息_苏州城市学院李想
鸿蒙js开发教程,js开发1 鸿蒙js开发下的页面布局页面
赞
踩
在鸿蒙开发环境下有一下两个小点需要读者引起注意
1.布局的时候一定要启用flex按列布局(这里与微信小程序js开发有一定区别)如下图:
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;
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;
}
最终效果图如下:
