更新记录

1.1.6（2022-10-24）

修复 初始化渲染变量取值错误问题

1.1.5（2022-10-24）

初始化渲染增加状态条件判断

1.1.4（2022-10-24）

修改空数据提示

查看更多

平台兼容性

Vue2 Vue3
√ ×
App 快应用 微信小程序 支付宝小程序 百度小程序 字节小程序 QQ小程序
app-vue √ √ √ √ √ √
钉钉小程序 快手小程序 飞书小程序 京东小程序
× × × ×
H5-Safari Android Browser 微信浏览器(Android) QQ浏览器(Android) Chrome IE Edge Firefox PC-Safari
√ √ √ √ √ √ √ √ √

插件简介

这是一款简单又好用的瀑布流布局模板，通过页面模板+组件的方式。充分利用组件的复用性和页面的生命周期。为了更好的兼容和更高的性能消耗，所以不采用多重自定义组件嵌套。

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

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

瀑布流组件的渲染触发条件是什么？

瀑布流组件的渲染触发情况有2种

  1. 控制瀑布流的渲染条件是 status 属性，当 status="success" 时，组件将会开始计算布局，计算完成后渲染列表效果。切记，需要触发渲染，需要将 status 设置为 success ，并且是由 非 success 转为 success。
  2. 如果组件在创建时， status 属性是 success，并且 list 属性的数据长度大于 0。

下载&体验

H5在线版 点我预览

常见问题解答

1. 如何定义瀑布流的样式和内容？

修改 waterfall-item.vue 这个子组件的 CSS样式和绑定的数据字段名称即可。

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

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

3. 有多个不同样式的瀑布流组件需求

可以将组件多复制几份，按不同的需求修改。也可以通过自动扩展 waterfall-list组件属性，来实现多个waterfall-item 子组件的切换。

4. 列表没有图片又想用这个插件

子组件的高度计算是由<image>图片组件的 @load 事件触发后上报的，如果是不需要图片的话可以提供一张 1px*1px的透明图片来保留现有的上报逻辑，也可以自行修改源码（不会改也别来问我，自己选的路就自己走）。

组件引用

组件的使用示例代码较多，建议下载 示例项目体验。详情见 waterfall.vue 文件

waterfall-list 插槽

名称 说明
default 可往组件内插入自定义内容，常用于显示组件不同状态下的提示内容。可参考示例项目

waterfall-list 组件属性说明

属性名 类型 说明
status String 组件状态，默认空字符串,可选值看下方 status 属性说明
list Array 待渲染的数据，默认值[]
reset Boolean 重置列表，默认值false，设置为 true 时，瀑布流在渲染时会清除之前的列表内容

waterfall-list 组件 status 属性说明

属性值 说明
await 等待加载
loading 等待加载
success 加载成功
finish 加载结束
fail 加载失败，该状态下组件不展示列表内容
empty 内容为空，该状态下组件不展示列表内容

waterfall-list 组件方法说明

方法名 回调参数 说明
@click (data, index, tag) 点击事件
data：被点击的项目数据
index：被点击的项目序号
tag：被点击的项目标记
@done () 瀑布流渲染完成事件，无返回参数

waterfall-item 组件 是用于渲染列表的整体效果项，使用时自行修改该组件的 CSS 和 绑定的数据属性

waterfall-item 组件属性说明

  • waterfall-item 组件属性说明 可以不需要阅读，一般使用都是不需要修改的
属性名 类型 说明
params Object 组件内容参数，具体值自行按页面内容要求编写
index Number 组件序号，为点击事件等需要返回当前序号使用
tag String / Number 组件标记，为区别是左侧还是右侧列表使用

waterfall-item 组件方法说明

  • waterfall-item 组件方法说明 可以不需要阅读，一般使用都是不需要修改的
方法名 必填 说明
@height 是 用于接收当前组件的高度，是瀑布流计算优先插入那一边的核心
@click 否 当组件被点击时触发，返回当前组件的 index 和 tag 值

友情提示：

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

隐私、权限声明

1. 本插件需要申请的系统权限列表：

无

2. 本插件采集的数据、发送的服务器地址、以及数据用途说明：

无

3. 本插件是否包含广告，如包含需详细说明广告表达方式、展示频率：

无

许可协议

MIT协议
评论列表 撰写评论
加载更多...
插件问答 我要提问

使用中有什么不明白的地方，就向插件作者提问吧~ 我要提问

加载更多...