当做商品展示区时想采用的卡片流布局，无限的向下加载商品，类似淘宝首页的推荐
效果图如下
那么如何实现以上的效果
这是我的方案：
1. 将页面分成两列，左列和右列，分别填充商品卡片，这样列与列不会相互干扰了
这时由于商品的图片长度不一，造成错位的效果。这里图片的裁剪方式为自适应长度，即
<image src="{{items.img}}"
mode='widthFix' lazy-load="true"></image>
2. 划分左右两列，这里直接用
<view wx:for='{{
2}}' wx:key='
index'></view>
3. 分别填充两列数据，但商品列表往往只有一个数组，如何拆分成两个列分别填充呢？
采用列表
索引取余区分左右
indexs%2==
index
其中indexs为商品数组的索引，通过取余操作划分左右两列填充，这样就可以了
1. <
block
wx:for='{{2}}' wx:key='index'>
2. <view class='side-line'>
3. <
block wx:for='{{
list}}' wx:for-item='items' wx:key='index' wx:for-index="
indexs">
4. <navigator wx:if='{{
indexs%2==index}}' url='pages/sale/detail/detail?gid={{items.goods_id}}' class='goods-card'>
5. <image src="{{items.img}}"
mode='
widthFix' lazy-load="true"></image>
6. <view class='goods-card-right'>
7. <view class='name'>{{items.name}}</view>
8. <view class='goods-price'>¥{{items.current_price}}</view>
9. <view class='old-price'>批发价¥{{items.old_price}}</view>
10. <image class='cart' src='/static/images/tab/cart_sel.png' lazy-load="true"></image>
11. <view class="bnt-box >已销{{items.buy_count}}</view>
12. </view>
13. </navigator>
14. <
/block>
15. </view>
16. <
/block>
以上是结构代码，
思路就是分开两列，每列各自填充所在的列的商品卡片，由于图片的高度不一造成错位的效果，数组按索引取余操作分别填充即可
如果你有更好的方式，欢迎交流！