微信小程序瀑布流实现,瀑布流长度不均等解决方法
这是一开始实现的瀑布流,将数据分为奇数列和偶数列
<view class="content-left">
<block wx:for="{{list}}" wx:key="list">
<template is='item-data' data='{{...item}}' wx:if="{{index % 2 ==0}}"></template>
</block>
</view>
<view class="content-right">
<block wx:for="{{list}}" wx:key="list">
<template is='item-data' data='{{...item}}' wx:if="{{index % 2 ==1}}"></template>
</block>
</view>
但是这样,瀑布流的两边的图片分布不同,有横着的图片和竖着的图片,导致了两边的长短不同,不美观
解决方法:使用微信自带的 scroll-view组件即可解决
官方文档:scroll-view | 微信开放文档
<scroll-view type="custom" scroll-y style="box-sizing:border-box;">
<grid-view type="masonry" main-axis-gap="{{10}}" cross-axis-gap="{{10}}">
<block wx:for="{{list}}" wx:key="list">
<view>
<template is='item-data' data='{{...item}}'></template>
</view>
</block>
</grid-view>
</scroll-view>
scroll-view可以自动依据长度,分布瀑布流的内容,让瀑布流的两边长度接近。