分享一个CSS Grid的用法
wxml
<view class="flock_member">
<block wx:for-items="{{item.memberlist}}" wx:key="item" wx:for-index="index">
<image class="flock_member_avatar" style="grid-area: a{{index}};" src="{{item.memberInfo[0].avatarUrl || '/images/default_img.png'}}"></image>
</block>
</view>
css
.flock_member {
display: grid;
grid-template-columns: 70rpx 70rpx 70rpx;
grid-template-rows: 70rpx 70rpx 70rpx;
grid-template-areas: ". . a0" ". a1 a2" "a3 a4 a5";
justify-items: end;
align-items: start;
}
.flock_member_avatar {
width: 60rpx;
height: 60rpx;
border-radius: 100rpx;
filter: drop-shadow(2px 9px 6px rgba(185, 185, 185, 0.20));
-webkit-filter: drop-shadow(2px 9px 6px rgba(185, 185, 185, 0.20));
transform: translateZ(0);
box-sizing: border-box;
}
之前的写法
<view class="flex-column member_box">
<image wx:for-items="{{item.memberlist}}" wx:for-index="idx" wx:key="item" wx:if="{{idx == 0}}"
<view class="flex-center">
<image wx:for-items="{{item.memberlist}}" wx:for-index="idx" wx:key="item" wx:if="{{idx == 1}}"
class="member_avatar" src="{{item.memberInfo[0].avatarUrl}}"></image>
<image wx:for-items="{{item.memberlist}}" wx:for-index="idx" wx:key="item" wx:if="{{idx == 2}}"
</view>
<view class="flex-center">
<image wx:for-items="{{item.memberlist}}" wx:for-index="idx" wx:key="item" wx:if="{{idx == 3}}"
class="member_avatar" src="{{item.memberInfo[0].avatarUrl}}"></image>
<image wx:for-items="{{item.memberlist}}" wx:for-index="idx" wx:key="item" wx:if="{{idx == 4}}"
class="member_avatar" src="{{item.memberInfo[0].avatarUrl}}"></image>
<image wx:for-items="{{item.memberlist}}" wx:for-index="idx" wx:key="item" wx:if="{{idx == 5}}"
class="member_avatar" src="{{item.memberInfo[0].avatarUrl}}"></image>
</view>
</view>