更新记录

1.2.3（2024-11-02） 下载此版本

• [修复] 组件重新渲染时未重置待渲染位置的问题
• [优化] 图片宽度支持 px 单位

1.2.2（2024-10-18） 下载此版本

• [修复] 解决了因为数据id重复导致的 小程序平台 waterfall-item 组件不会重新渲染的问题

1.2.1（2024-10-07） 下载此版本

全新升级为组件+插槽的方案实现，极大的简便了组件的使用和内容调整。

平台兼容性

瀑布流 helang-waterfall

插件简介

这是一款简单又好用的瀑布流布局组件，从1.2.1版本开始全新升级为组件+插槽的方案实现，极大的简便了组件的使用和内容调整。

源码中有详细的注释，请各位开发者按个人需求自行修改。

对使用有疑问，可以先导入 [示例项目] 学习 页面与组件的使用流程

组件使用

示例源码

示例源码较多，请下载示例项目查看

组件清单

// 引用组件
/* 瀑布流组件 */
// 容器组件
import Waterfall from "@/uni_modules/helang-waterfall/components/waterfall/waterfall-list";
// 分栏组件
import WaterfallCol from "@/uni_modules/helang-waterfall/components/waterfall/waterfall-col";
// 内容组件
import WaterfallItem from "@/uni_modules/helang-waterfall/components/waterfall/waterfall-item";

export default {
    // ...
    // 注册组件
    components: {
        "waterfall": Waterfall,
        "waterfall-col": WaterfallCol,
        "waterfall-item": WaterfallItem
    },
    // ...
}

容器组件 waterfall-list

插槽

default插槽透传数据说明

• 数据结构：{ list,colWidth }
• 字段说明：
  1. list：渲染的数据列表，数据增加了 __waterfall_renderId、__waterfall_imageHeight 属性
     1. __waterfall_renderId 用于<waterfall-item>组件循环渲染的 key
     2. __waterfall_imageHeight 用于<image>标签的 style高度
  2. colWidth：栏目的宽度，用于 <waterfall-col> 组件的colWidth属性

属性

方法

• 源码演示

// 组件绑定 ref
<waterfall ref="helangWaterfall">...</waterfall>

// 通过 ref 调用组件中的方案
// 渲染
this.$refs.helangWaterfall.render(数据Array,是否重绘Boolean);
// 上报当前高度
this.$refs.helangWaterfall.reportHeight(栏目序号Number,高度Number);

• 详细说明

事件

分栏组件 waterfall-col

属性

内容组件 waterfall-item

属性

事件

常见问题解答

1. 列表渲染速度太慢，怎么优化？

瀑布流布局最大的难点是在于图片加载是一个异步的过程，所以本插件也是利用了图片加载这个事件来触发组件初始化完成的。为了更好的加载体验和降低用户的用户的流量消耗，推荐使用缩略图来做为列表中的显示（也应当这么做，不只是在瀑布流布局中），这也是做好一个产品最基本的优化要求。

友情提示：

1. 当前项目源码使用了 ES6 和 scss 请添加运行依赖
2. [插件ZIP]只包含模板文件和数据文件，不包含项目运行依赖（如 pages.json）
3. [示例项目ZIP]是完整的项目文件，可下载后导入 HBuilderX 中直接运行体验
4. 文件下载在当前页面的上部靠右位置，有 [下载插件ZIP] [下载示例项目ZIP] 按钮，点击即可下载