當做商品展示區時想采用的卡片流布局，無限的向下加載商品，類似淘寶首頁的推薦
效果圖如下
那么如何實現以上的效果
這是我的方案：
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>
以上是結構代碼，
思路就是分開兩列，每列各自填充所在的列的商品卡片，由於圖片的高度不一造成錯位的效果，數組按索引取余操作分別填充即可
如果你有更好的方式，歡迎交流！