更新记录
V1.0(2025-02-07)
下载此版本
1.新增动态设置列数;
2.新增动态设置间距;
3.新增动态加载距离;
4.新增动态设置容器高度;
5.新增自定义内容;
平台兼容性
App |
快应用 |
微信小程序 |
支付宝小程序 |
百度小程序 |
字节小程序 |
QQ小程序 |
HBuilderX 3.8.11 app-vue |
√ |
√ |
√ |
√ |
√ |
√ |
钉钉小程序 |
快手小程序 |
飞书小程序 |
京东小程序 |
鸿蒙元服务 |
√ |
√ |
√ |
√ |
√ |
H5-Safari |
Android Browser |
微信浏览器(Android) |
QQ浏览器(Android) |
Chrome |
IE |
Edge |
Firefox |
PC-Safari |
√ |
√ |
√ |
√ |
√ |
√ |
√ |
√ |
√ |
该组件文件放置在 component/waterfall.vue 目录下
在需要使用该组件的页面中引入 waterfall.vue 组件(可参考pages/index/index.vue),例如在 index.vue 文件中:
属性说明:
data:数据源数组,每个元素包含图片信息和其他相关数据。
col-num:列数,默认为2。
gap:列间距,默认为10。
load-distance:触发加载的滚动距离,默认为200。
container-height:容器高度,默认为500。
事件说明:
loadmore:当滚动到底部时触发,用于加载更多数据。