
回复
添加资源
添加资源将有机会获得更多曝光,你也可以直接关联已上传资源 去关联
1.数据模型定义
2.页面布局hml
<div class="pageview">
<div class="topview">
<div class="topcell">
<text class="txtview">{{title}}</text>
</div>
<div class="topcell">
<text class="txtview">{{t1}}</text>
</div>
<div class="topcell">
<text class="txtview">{{t2}}</text>
</div></div>
<div class="contentview">
<div class="fbox">
<block for="{{dataarrays}}">
<div class="box">
<text>{{$item}}</text>
</div></block></div></div>
<div class="bottomview">
<text class="txtview">{{btxt}}</text>
</div></div>
3.弹性布局css
pageview{
width: 100%;
height: 1200px;;
background-color: aqua;
/**启用fiex布局**/
display: flex;
/**方向按列布局**/
flex-direction: column;}
.topview{
width: 100%;
height: 20%;
background-color: cornflowerblue;
display: flex;
/**垂直居中**/
align-items: center;
/**水平居中**/
justify-content: center;}
.contentview{
width: 100%;
height: 70%;
background-color: azure;
display:flex;
justify-content: center;
align-items: center;}
.bottomview{
width: 100%;
height: 10%;
background-color: cornflowerblue;
display: flex;
justify-content: center;
align-items: center;}
.topcell{
width: 30%;
height: 60%;
border: 4px solid deepskyblue;
margin: 10px;
border-radius: 20px;
display: flex;
justify-content: center;}
.txtview{
font-size: 50px;
color: snow;
font-weight: bold;}
.box{
width: 30%;
height: 190px;
border: 2px solid black;
display:flex;
justify-content: center;
align-items: center;
margin: 5px;
border-radius: 10px;}
.fbox{
width: 80%;
height: 71%;
background-color: deepskyblue;
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
border-radius: 20px;}
4.