微信小程序瀑布流最好最简单的解决方案
版权申诉
112 浏览量
2021-03-29
17:36:53
上传
评论
收藏 78KB PDF 举报
微信小程序瀑布流最好最简单的解决方案微信小程序瀑布流最好最简单的解决方案
网上能搜到的小程序瀑布流解决方案，要么代码复杂、逻辑混乱，要么实现不了业务功能，所以把我在项目中的实现方案给大
家分享下。
最简单的实现方案，不适用有分页的场景。
这个方案简单的原因是因为仅仅使用了css的属性。
使用column-count 属性可以指定页面显示的列数，一般瀑布流都是2列，所以可以定义class
.list-masonry {
column-count: 2; //2列
column-gap: 20rpx; //列间距
}
界面定义也很简单
<view class='list-masonry'>
<block wx:for="{{goodsList}}" wx:key="{{item.id}}">
<template is='goodsCard' data="{{data:item}}" />
</block>
</view>
其中，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)。
(此图片来源于网络，如有侵权，请联系删除! )
2. 设计瀑布流的wxml。
瀑布流的结构简单，只有左右2列。所以在设计UI的时候，布局很简单。
<view class='fall-container'>
<!-- 左边一列 -->
<view class='fall-left'>
<block wx:for="{{leftList}}" wx:key="{{item.id}}">
<!--瀑布流内容卡片-->
<template is='goodsCard' data="{{data:item}}" />
</block>
评论0