微信小程序瀑布流如何实现

本篇内容介绍了“微信小程序瀑布流如何实现”的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接下来就让小编带领大家学习一下如何处理这些情况吧！希望大家仔细阅读，能够学有所成！
最简单的实现方案，不适用有分页的场景。
这个方案简单的原因是因为仅仅使用了css的属性。

使用column-count 属性可以指定页面显示的列数，一般瀑布流都是2列，所以可以定义class
界面定义也很简单
其中，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!! 跟着我的步骤一步一步来，就能轻松实现。
首先创建瀑布流自免费云主机域名定义组件文件。
建议在项目根目录创建文件夹component，然后在该目录下创建文件夹WaterFallView，最后在WaterFallView下创建component。(鼠标右键->新建->Component)。

2. 设计瀑布流的wxml。
瀑布流的结构简单，只有左右2列。所以在设计UI的时候，布局很简单。
左右两边，一边一个View。通过这两个View 来展示瀑布流的两列。每个View对应一个数据源，由此可见，这套思路的重点是这个两个数据源的处理。每个View中的template 为瀑布流中的卡片，就不介绍了。

超过两列的瀑布流比较少见，本篇不考虑，但可用本篇的思路来实现。
css样式
具体实现逻辑
根据上面的 wxml 结构，这个组件的核心逻辑就是如何把要展示的数据item 放入leftList、rightList这两个数组中。
如何分配数据item？这个简单，我们可以定义2个变量 leftHight、rightHight，来分别记录leftList、rightList数组中图片的高度（可以理解为左边View、右边View的高度，其实只是图片的高度，但已满足瀑布流的的需求）。当leftHight 大于 rightHight时，把数据放入rightList，并让rightHight叠加数据中图片的高度。当rightHight大于 leftHight 时，把数据放入leftList，并让leftHight 叠加数据中图片的高度。
瀑布流展示图片的时候，需要知道图片的宽高，然后根据图片的宽高比来设置 image组件的宽高。所以如果你们的数据没有宽高或宽高比，很难实现瀑布流。虽然可以通过代码获得图片宽高，但会对性能以及用户体验有很大影响，不推荐这么做。可以和后台同学商量下，看如何加上宽高数据。
Component有自己生命周期方法，甚至可以象Page一样，当做一个单独的页面使用。可以在他的生命周期方法中获得到瀑布流的宽度，以及图片的最大高度。
拿到瀑布流的宽度后，就可以根据图片的宽高比，计算出 image 组件的宽高。
在template中，image的宽高需要声明下。单位是px,不是rpx
所有JS代码
使用瀑布流
a. 注册自定义组件

在使用自定义组件的Page的json文件中声明要使用的组件
b. 在 wxml 中添加组件，并加上 id“微信小程序瀑布流如何实现”的内容就介绍到这里了，感谢大家的阅读。如果想了解更多行业相关的知识可以关注百云主机网站，小编将为大家输出更多高质量的实用文章！

相关推荐: html如何在网页中用按钮来控制前页，后页和主页的显示

这篇文章将为大家详细讲解有关html如何在网页中用按钮来控制前页，后页和主页的显示，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。在网页中用按钮来控制前页，后页和主页的显示。关于“html如何在网页中用按钮来控制前页，后页和主…