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

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

效果图如下

 

那么如何实现以上的效果

这是我的方案：

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>

 

以上是结构代码，思路就是分开两列，每列各自填充所在的列的商品卡片，由于图片的高度不一造成错位的效果，数组按索引取余操作分别填充即可

 

如果你有更好的方式，欢迎交流！