当做商品展示区时想采用的卡片流布局,无限的向下加载商品,类似淘宝首页的推荐
效果图如下
那么如何实现以上的效果
这是我的方案:
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为商品数组的索引