uview 瀑布流_微信小程序瀑布流最好最简单的解决方案

网上能搜到的小程序瀑布流解决方案，要么代码复杂、逻辑混乱，要么实现不了业务功能，所以把我在项目中的实现方案给大家分享下。

最简单的实现方案，不适用有分页的场景。

这个方案简单的原因是因为仅仅使用了css的属性。

使用column-count 属性可以指定页面显示的列数，一般瀑布流都是2列，所以可以定义class

.list-masonry {

column-count: 2; //2列

column-gap: 20rpx; //列间距

}

界面定义也很简单

其中，goodsList为页面展示的数据，goodsCard为瀑布流的卡片，这个很容易理解。

注意，瀑布流的卡片需要css属性 display: inline-block; 将卡片设置为 内联元素。image 组件设置缩放模式 mode="widthFix" 来保持图片宽高比。

column-count 属性默认是以列的形式来填充数据的。比如我们有20条数据，1 ~ 10 条数据会展示在左边第一列，11 ~ 20 条数据会展示在第二列。

如果有分页，再往数组中增加20条数据后，就会变成 1 ~ 20 条数据会在左边，21 ~ 40 条数据会展示在右边。用户体验非常差。

由于 column-fill: balance; 填充属性无效，无法指定填充顺序为行的形式。

所以这种实现方案只能一下加载完所有数据，不适用于分页。

Component实现瀑布流，功能强大，滑动流畅

通过自定义组件，用自己的思路实现瀑布流。然后在需要瀑布流的地方直接调用，方便复用。

没有Demo!! 跟着我的步骤一步一步来，就能轻松实现。

1. 首先创建瀑布流自定义组件文件。

建议在项目根目录创建文件夹component，然后在该目录下创建文件夹WaterFallView，最后在WaterFallView下创建component。(鼠标右键->新建->Component)。

微信截图_20180607103451.png

2. 设计瀑布流的wxml。

瀑布流的结构简单，只有左右2列。所以在设计UI的时候，布局很简单。

左右两边&