生活随笔
收集整理的這篇文章主要介紹了
微信小程序九宫格
小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.
微信小程序九宮格
- 不用定死父容器的寬高,實(shí)現(xiàn)自適應(yīng)九宮格
- wxml
<view class="moreimg"><block wx:for="{{9}}" wx:key="index"><view class="moreimg-wrap"><image class="moreimg-wrap-img" src="/static/img/index/banner2.jpg" /></view></block>
</view>
.moreimg {display: flex
;flex-wrap: wrap
;border: 2rpx solid #f56c6c
;
}
.moreimg-wrap {position: relative
;overflow: hidden
;width: 32%
;height: 0
;padding-bottom: 32%
;border-radius: 10rpx
;
}
.moreimg-wrap:nth-of-type(3n) {margin-bottom: 2%
;
}
.moreimg-wrap:nth-of-type(3n+2) {margin: 0 2%
;
}
.moreimg-wrap:nth-last-of-type(1) {margin-bottom: 0
;
}
.moreimg-wrap-img {position: absolute
;left: 50%
;top: 50%
;transform: translate(-50%
, -50%
);
}
總結(jié)
以上是生活随笔為你收集整理的微信小程序九宫格的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。
