当做商品展示区时想采用的卡片流布局，无限的向下加载商品，类似淘宝首页的推荐
效果图如下
那么如何实现以上的效果
这是我的方案：
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>
以上是结构代码，思路就是分开两列，每列各自填充所在的列的商品卡片，由于图片的高度不一造成错位的效果，数组按索引取余操作分别填充即可
如果你有更好的方式，欢迎交流！
请发表评论