這只是一個取巧的方式來實現流式布局，有潛在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: ''

})

}

總結

以上是生活随笔為你收集整理的小程序流式布局的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。