# fu-waterfall 瀑布流
这是一个瀑布流形式的组件，内容分为左右两列，结合 fu-waterflow，fu-goods-block,uni-load-more 组件效果更佳。
# 平台差异
| App | H5 | 微信小程序 | 支付宝小程序 | 百度小程序 | 头条小程序 |
|---|---|---|---|---|---|
| √ | √ | √ | √ | √ | √ |
# 基本使用
<template>
<view>
<fu-waterfall v-model="lists">
<template v-slot:left="{ leftList }">
<!-- 这里编写左边内容 -->
</template>
<template v-slot:right="{ rightList }">
<!-- 这里编写右边内容 -->
</template>
</fu-waterfall>
</view>
</template>
<script>
export default {
data() {
return {
lists: []
};
}
};
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
# 结合 fu-waterflow，fu-goods-block,uni-load-more 组件使用
<template>
<view>
<!-- 在fu-waterflow写入以下代码 -->
<fu-waterfall v-model="lists">
<template v-slot:left="{ leftList }">
<block v-for="(item, index) in leftList" :key="item.id">
<fu-goods-block :info="item"></fu-goods-block>
</block>
</template>
<template v-slot:right="{ rightList }">
<block v-for="(item, index) in rightList" :key="item.id">
<fu-goods-block :info="item"></fu-goods-block>
</block>
</template>
</fu-waterfall>
<uni-load-more :status="status" v-if="lists.length > 5"></uni-load-more>
</view>
</template>
<script>
export default {
data() {
return {
lists: [],
status: "more",
page: 1,
size: 10
};
},
methods: {
}
};
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
# API
# Props
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
|---|---|---|---|---|
| value | 瀑布流数据 | Array | [] | |
| addTime | 每次向结构插入数据的时间间隔，间隔越长，越能保证两列高度相近，但是对用户体验越不好，单位ms | Number, String | 200 |