这只是一个取巧的方式来实现流式布局,有潜在bug,原理是布局分成两列,将要显示的数据也分成奇数列和偶数列,左侧展示偶数列数据,右侧展示奇数列数据。
潜在的bug是如果偶数列里的图片高度一直比奇数列的高,就会两列一列特别长的情况。
修复此潜在bug的博客链接https://blog.csdn.net/u012011360/article/details/88051196
效果图:
html部分:
<view class='list'>
<view class='listLeft left'>
<block wx:for="{ {goodsLeft}}" wx:key="{ {item.id}}">
<view class='item' >
<image src='{ {item.goodsPhotoUrl}}' mode="widthFix" data-id='{ {item.id}}' bindtap='goGoodsDetail'></image>
</view>
</view>
<view class='listRight left'>
<block wx:for="{ {goodsRight}}" wx:key="{ {item.id}}">
<view class='item' >
<image src='{ {item.goodsPhotoUrl}}' mode="widthFix" data-id='{ {item.id}}' bindtap='goGoodsDetail'></image>
</view>
</view>
</view>
css部分:
.left{
float:left;
}
.listLeft,.listRight{
width: 340rpx;
}
.listRight{
margin-left: 20rpx;
}
js部分:
var result = res.data;
//console.info(result.data.goods);
if (result.code == 0) {
var goods = result.data.goods;
var goodsRight = [];
var goodsLeft = [];
for (var i = 0; i < goods.length;i++){
if(i%2==0){
goodsLeft.push(goods[i]);
}else{
goodsRight.push(goods[i]);
}
}
console.info(goods);
that.setData({
goods: goods,
goodsRight: goodsRight,
goodsLeft: goodsLeft,
noGoods: 'hide',
more: ''
})
}