Waterfall 瀑布流 
概述
Waterfall 瀑布流，是比较流行的一种页面布局，视觉表现为参差不齐的多栏布局。
Waterfall 提供了fui-waterfall 和 fui-waterfall-item 两个组件来进行布局（需结合使用）。
# 支持平台
| App-vue | App-Nvue | 微信小程序 | 支付宝小程序 | 百度小程序 | 字节小程序 | QQ小程序 | H5 | PC | 快手小程序 | 钉钉小程序 |
|---|---|---|---|---|---|---|---|---|---|---|
| ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ |
温馨提示
目前组件默认固定为两列，后期视情况进行优化。
组件默认使用屏幕宽度，请勿在组件外层使用padding设置左右间距，请使用props属性设置。
列表中图片src需要传入 fui-waterfall-item 组件中，其他信息自行在插槽中进行布局。
Nvue 端建议使用 waterfall (opens new window) 组件。
# 引入
以下介绍两种常用的引入方式。
第一种：在页面中引用、注册
import fuiWaterfall from "@/components/firstui/fui-waterfall/fui-waterfall.vue"
import fuiWaterfallItem from "@/components/firstui/fui-waterfall-item/fui-waterfall-item.vue"
export default {
components:{
fuiWaterfall,
fuiWaterfallItem
}
}
1
2
3
4
5
6
7
8
2
3
4
5
6
7
8
第二种：easycom组件规范
传统vue组件，需要安装、引用、注册，三个步骤后才能使用组件。easycom将其精简为一步。
First UI easycom配置请查看 快速上手。
如果不了解easycom，可先查看 官网文档 (opens new window)。
# 代码演示
部分示例演示，完整使用请参考示例程序以及文档API。
基础使用
通过 src 属性设置item项图片src，其他信息可在插槽内自行加。
图片src传入item组件不写在插槽中的原因：组件布局需要等图片加载完成，计算列高度，以达到最优排版。
<fui-waterfall>
<fui-waterfall-item v-for="(item,index) in images" :key="index" :src="item">
<view class="fui-text">自定义信息</view>
</fui-waterfall-item>
</fui-waterfall>
1
2
3
4
5
2
3
4
5
export default {
data() {
return {
images: [
'https://res.firstui.cn/static/images/component/waterfall/P_001.jpeg',
'https://res.firstui.cn/static/images/component/waterfall/P_002.jpeg',
'https://res.firstui.cn/static/images/component/waterfall/P_003.jpeg',
'https://res.firstui.cn/static/images/component/waterfall/P_004.jpeg',
'https://res.firstui.cn/static/images/component/waterfall/P_005.jpeg',
'https://res.firstui.cn/static/images/component/waterfall/P_006.jpeg',
'https://res.firstui.cn/static/images/component/waterfall/P_007.jpeg',
'https://res.firstui.cn/static/images/component/waterfall/P_008.jpeg',
'https://res.firstui.cn/static/images/component/waterfall/P_009.jpeg',
'https://res.firstui.cn/static/images/component/waterfall/P_010.jpeg',
'https://res.firstui.cn/static/images/component/waterfall/P_011.jpeg',
'https://res.firstui.cn/static/images/component/waterfall/P_012.jpeg',
]
}
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
# Slots
# fui-waterfall 组件
| 插槽名称 | 说明 |
|---|---|
| default | 标签显示内容，内部由一个或多个 fui-waterfall-item 组成 |
# fui-waterfall-item 组件
| 插槽名称 | 说明 |
|---|---|
| default | 标签内显示的自定义内容，位于图片下方 |
| upper | 标签内显示的自定义内容，位于图片上方 |
# Props
温馨提示：1.目前组件默认固定为两列，后期视情况进行优化；2.组件默认使用屏幕宽度进行计算列宽，请勿在组件外层使用padding设置左右间距，请使用以下props属性进行设置。
# fui-waterfall 组件
| 属性名 | 类型 | 说明 | 默认值 | 平台差异说明 |
|---|---|---|---|---|
| columnGap | Number, String | 列与列的水平方向间隙，单位rpx | 24 | - |
| topGap | Number, String | 列与列的垂直方向间隙，单位rpx | 24 | - |
| leftGap | Number, String | 列表左侧与屏幕间隙，单位rpx | 0 | - |
| rightGap | Number, String | 列表右侧与屏幕间隙，单位rpx | 0 | - |
# fui-waterfall-item 组件
如果图片宽高固定已知，可直接设置值，避免加载时间过长。注：仅支持初始化时设置，请勿动态调整。
| 属性名 | 类型 | 说明 | 默认值 | 平台差异说明 |
|---|---|---|---|---|
| background | String | item项背景色 | #FFFFFF | - |
| radius | Number, String | item项圆角值，单位rpx | 16 | - |
| src | String | 图片地址，如果列表包含图片，此参数为必传参数 | - | - |
| imgWidth | Number, String | 图片宽度，单位rpx，为0则默认使用列宽度 | 0 | - |
| imgHeight V1.9.8+ | Number, String | 图片高度，单位rpx，如果设置值则固定图片高度，不需要等图片加载完成再去渲染，需要自适应高度请勿设置值 | 0 | - |
| webp | Boolean | 默认不解析 webP 格式，只支持网络资源 | false | 微信小程序2.9.0+ |
| draggable | Boolean | 是否能拖动图片 | true | H5 3.1.1+、App（iOS15+） |
| param | Number, String | 自定义参数，随事件回传 | 0 | - |
# Events
# fui-waterfall 组件
提示：分页加载数据时，为了避免排版出错，等触发@end事件后才可去加载下一页数据。
| 事件名 | 说明 | 回调参数 |
|---|---|---|
| @init | 初始化时触发 | { itemWidth:列宽度，单位px } |
| @end | 分页数据渲染完成时触发 | { } |
# fui-waterfall-item 组件
| 事件名 | 说明 | 回调参数 |
|---|---|---|
| @click | 点击item时触发 | { param:自定义参数 } |
# Methods
通过 ref 来注册组件引用信息，引用信息将会注册在父组件的$refs对象上。注册完成后，通过 this.$refs.XXX 访问到对应的组件实例，然后按需调用以下方法。
# fui-waterfall 组件
| 方法名 | 说明 | 传入参数 |
|---|---|---|
| resetLoadmore | 重置加载，当下拉刷新重置数据时需要先调用此方法重置组件 | - |
示例预览
# 示例代码地址
VIP内容代码请查看订单页下载的组件库示例源码。# 特别说明
该组件为付费组件，UNI-APP版VIP用户可免费使用 。