有点标题党了，实际上，小程序布局和h5布局并没有区别，非要说区别，可能是微信对新的css属性的支持没有浏览器好。
先看效果图。
实现方式：flex+js分组
wxml:
<view class="img-box">
<view class="column">
<view class="img-sec" wx:for="{{imgArr1}}">
<image src="{{item}}" mode="widthFix"></image>
</view>
</view>
<view class="column">
<view class="img-sec" wx:for="{{imgArr2}}">
<image src="{{item}}" mode="widthFix"></image>
</view>
</view>
</view>
wxss:
.img-box{
display: flex;
justify-content: space-between;
}
.column{
display: flex;
flex-direction: column;
}
.img-box .img-sec{
margin-bottom:30rpx;
}
.img-box image{
display: block;
width: 338rpx;
border-radius: 26rpx;
}
js:
test() {
let imgArr1 = [];
let imgArr2 = [];
//服务器上的数据
let imgArr = res.data.imgs
for (let i = 0; i < imgArr.length; i++) {
imgArr1.push(imgArr[i++])
if (i < imgArr.length) {
imgArr2.push(imgArr[i])
}
}
this.setData({
imgArr1: imgArr1,
imgArr2: imgArr2
})
},
参考：https://juejin.im/post/6844904004720263176
此内容由惯性聚合(RSS阅读器)自动聚合整理，仅供阅读参考。 原文来自 — 版权归原作者所有。