这只是一个取巧的方式来实现流式布局,有潜在bug,原理是布局分成两列,将要显示的数据也分成奇数列和偶数列,左侧展示偶数列数据,右侧展示奇数列数据。
潜在的bug是如果偶数列里的图片高度一直比奇数列的高,就会两列一列特别长的情况。
修复此潜在bug的博客链接https://blog.youkuaiyun.com/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}}'