今天主要通過(guò)三種方式實(shí)現(xiàn)：
wxml代碼：
<view class="container">
<view class="viewContainer" wx:for="{{cells}}">
<image class="cellIcon" src="{{item.imageUrl}}"></image>
<view>{{item.title}}</view>
</view>
</view>
1聚蝶、通過(guò)浮動(dòng)float實(shí)現(xiàn)
.container{
margin: 0;
padding: 0;
display: block;
}
.viewContainer{
float: left;
width: 33.3%;
height: 150px;
text-align: center;
border: 1px solid lightblue;
box-sizing: border-box;
}
.cellIcon{
width: 100%;
height: 120px;
}
2嗤无、 flex-direction實(shí)現(xiàn)：
.container{
margin: 0;
padding: 0;
display: flex;
flex-direction: row;
flex-wrap: wrap;
text-align: center;
}
.viewContainer{
width: 33.3%;
padding: 5px;
box-sizing: border-box;
border: 1px solid lightblue;
}
.cellIcon{
width: 100%;
height: 110px;
}
3姚垃、通過(guò) column-count實(shí)現(xiàn)
.container{
margin: 0;
padding: 0;
display: block;
column-count: 2;
column-gap: 0px;
}
.viewContainer{
height: 150px;
text-align: center;
border: 1px solid lightblue;
box-sizing: border-box;
background: red;
}
.cellIcon{
width: 100%;
height: 120px;
}
最終效果:
