微信小程序实现卡片流布局

当做商品展示区时想采用的卡片流布局，无限的向下加载商品，类似淘宝首页的推荐

效果图如下

 

那么如何实现以上的效果

这是我的方案：

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为商品数组的索引࿰