Waterfall 瀑布流

将项目按高度分配到两列，支持图片、自定义内容和分页加载。

支持平台

以下为官网文档所列的平台支持情况，具体功能及版本限制请参见本页的平台说明。

App-vue	App-nvue	微信小程序	支付宝小程序	百度小程序	字节小程序	QQ小程序	H5	PC	快手小程序	钉钉小程序
✓	✓	✓	✓	✓	✓	✓	✓	✓	✓	✓

基础用法

vue

<!-- 双列瀑布流 -->
<fui-waterfall ref="waterfallRef">
  <!-- 列表项，id 需稳定且唯一 -->
  <fui-waterfall-item v-for="item in items" :key="item.id" :src="item.src" :param="item.id">
    <text>{{ item.title }}</text>
  </fui-waterfall-item>
</fui-waterfall>

在页面数据中定义 items。图片高度自适应时组件会等待图片加载后测量，固定高度可使用 imgHeight。

容器属性

属性	类型	说明	官网默认值
columnGap	Number / String	两列水平间距，单位 rpx	24
topGap	Number / String	项目垂直间距，单位 rpx	24
leftGap	Number / String	列表左侧间距，单位 rpx	0
rightGap	Number / String	列表右侧间距，单位 rpx	0
isBefore	Boolean	是否在数组开头插入数据	false

isBefore 为 true 时应为每个项目提供稳定、唯一的 key，不能使用数组索引。

列表项属性

属性	类型	说明	官网默认值
background	String	项目背景色	#FFFFFF
radius	Number / String	项目圆角，单位 rpx	16
allRadius	Boolean	图片是否使用完整圆角	false
src	String	图片地址；需要显示图片时必传	-
imgWidth	Number / String	图片宽度，0 使用列宽，单位 rpx	0
imgHeight	Number / String	固定图片高度，0 为自适应，单位 rpx	0
webp	Boolean	是否解析网络 WebP 图片	false
draggable	Boolean	是否允许拖动图片	true
param	Number / String	点击事件携带的参数	0

官网 V2.5 的 allRadius 在当前本地组件中未声明；图片默认仅设置顶部圆角。

事件

事件	说明	回调参数
init（容器）	初始化完成	`{ itemWidth }`，单位 px
end（容器）	当前页项目渲染完成	`{}`
click（项目）	点击瀑布流项目	`{ param }`

下拉刷新并替换列表前，可通过容器实例调用 resetLoadmore() 重置布局。webp 和 draggable 的支持情况取决于目标平台版本。

插槽

插槽	说明
default	放置瀑布流项目

Waterfall 瀑布流 ​

支持平台 ​

基础用法 ​

容器属性 ​

列表项属性 ​

事件 ​

插槽 ​

Waterfall 瀑布流

支持平台

基础用法

容器属性

列表项属性

事件

插槽