客服电话
APP下载
迪恩网络APP
随时随地掌握行业动态
官方微信
扫描二维码
关注迪恩网络微信公众号
|
有点标题党了，实际上，小程序布局和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
|
今天小编告诉大家如何对win10系统删除桌面回收站图标进行设置，可能很多用户都不知道
请发表评论