分享一个CSS Grid的用法
发布于 4 年前 作者 yinming 3381 次浏览 来自 分享

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>
1 回复

虽然看不懂,但是感觉很厉害

回到顶部