外观
Waterfall 瀑布流
约 1724 字大约 6 分钟
2025-10-31
基本使用
本组件利用了vue的作用域插槽(详见vue文档)特性， 将传入waterfall内部的数据，通过slot(作用域插槽)让用户能在父组件中引用和配置对应的数据，这样做的 原因是可以让用户自定义列表item的结构和样式，达到真正的组件化。
需要注意的是，组件内部导出的数据，需要使用template元素接收 渲染左右两列的数据，见如下完整示例：
基础使用
<un-waterfall v-model="flowList">
<template #default="{ columnList, columnIndex }">
<view v-for="(item, index) in columnList" :key="index">
</view>
</template>
</un-waterfall>完整应用示例
<template>
<un-page class="waterfall-page">
<un-waterfall v-model="flowList" :column="columns" ref="uWaterfall">
<template #default="{ columnList, columnIndex }">
<view class="waterfall" v-for="(item, index) in columnList" :key="index">
<un-image :src="item['image']" width="100%" height="200"></un-image>
<view class="waterfall-wrapper">
<text class="waterfall-title">{{ item['title'] }}</text>
<view class="waterfall-price">
<text class="waterfall-sale-price">{{ item['price'] }}元</text>
<text class="waterfall-original-price">{{ item['original_price'] }}元</text>
</view>
<view class="waterfall-tag">
<text class="waterfall-tag-owner">自营</text>
<text class="waterfall-tag-text">{{ item['tag'] }}</text>
</view>
<text class="waterfall-shop">{{ item['shop'] }}</text>
</view>
</view>
</template>
</un-waterfall>
<un-loadmore :status="loadStatus" @loadmore="addRandomData"></un-loadmore>
</un-page>
</template>
<script setup lang="uts">
import { ref, onMounted } from 'vue'
import { random } from '@/uni_modules/uview-unix'
const columns = ref(2) // 默认2列
const loadStatus = ref('loadmore')
const flowList = ref<UTSJSONObject[]>([])
// 商品数据
const list = [
{
"price": "¥9.9",
"original_price": "29.90",
"title": "新款兔年钥匙扣卡通可爱钥匙链小礼品新年唐装兔子钥匙扣挂件",
"shop": "时尚小店",
"image": "https://s10.mogucdn.com/mlcdn/c45406/221206_80i2a6d22bhd27j8dd9hd0jk03ajl_1280x1280.jpg",
"tag": "国民妹妹"
},
{
"price": "¥9.9",
"original_price": "39.90",
"title": "韩版帽子女针织毛线帽显脸小2022年新款",
"shop": "潮流服饰",
"image": "https://s10.mogucdn.com/mlcdn/c45406/221030_37d3clf938f6gafh284d2b432chlc_800x800.jpg",
"tag": "新款女王"
},
{
"price": "¥9.9",
"original_price": "39.00",
"title": "一片式挂耳染假发条长度可剪裁",
"shop": "美发天地",
"image": "https://s10.mogucdn.com/mlcdn/c45406/220106_2bfd6h9g246ig437l8djc3414li96_753x738.jpg",
"tag": "好货聚集地"
},
{
"price": "¥9.9",
"original_price": "99.00",
"title": "【左左yzzz佳佳】折叠墨镜高级感户外防紫外线复古折叠太阳眼镜",
"shop": "时尚配饰",
"image": "https://s10.mogucdn.com/mlcdn/c45406/250329_6d5haf3j01bhc0dbag19df52ak270_800x800.jpg",
"tag": ""
},
{
"price": "¥9.9",
"original_price": "99900",
"title": "R6659 T恤女夏季三色天丝绵百搭简约宽松显瘦短袖上衣",
"shop": "潮流服饰",
"image": "https://s10.mogucdn.com/mlcdn/c45406/250808_1klkic0a87j95l84bab7k99i86abe_800x800.jpg",
"tag": "性价比之神"
},
{
"price": "¥39.9",
"original_price": "199.00",
"title": "FN23031080中长裙",
"shop": "时尚女装",
"image": "https://s10.mogucdn.com/mlcdn/c45406/230613_5709814lj9059jflhd4552clbd6ia_1000x1000.jpg",
"tag": "小个子穿搭"
},
{
"price": "¥9.9",
"original_price": "29.90",
"title": "网红发根蓬松夹头发蓬松简约气质固定发根发夹空气刘海蓬松夹发卡",
"shop": "美发天地",
"image": "https://s10.mogucdn.com/mlcdn/c45406/211024_1ba91l79defd7ijflk50gj164k9f1_760x760.jpg",
"tag": "矮个子穿搭"
},
{
"price": "¥288.8",
"original_price": "28880",
"title": "2023SS 人鱼之泪碧空海洋蓝钉珠高腰牛仔阔腿裤",
"shop": "时尚女装",
"image": "https://s10.mogucdn.com/mlcdn/c45406/241019_075ca09jijhgejc05g10ifk78lbbg_1080x1440.jpg",
"tag": "复古酷girl"
},
{
"price": "¥94",
"original_price": "23800",
"title": "西西里#韩国东大门春季新款港味纯色基础宽松休闲简约长袖衬衫女",
"shop": "时尚女装",
"image": "https://s10.mogucdn.com/mlcdn/c45406/220102_2hd15b9cihg9a7jibigjeg7i6eca0_640x960.jpg",
"tag": "网红姐妹花"
},
{
"price": "¥79.9",
"original_price": "99900",
"title": "奥古狮登10216小白鞋女透气百搭学生厚底舒适显瘦软底女鞋",
"shop": "潮流鞋履",
"image": "https://s10.mogucdn.com/mlcdn/c45406/230207_02g59i11ddicdcdda331e5blgjccf_800x800.jpg",
"tag": "性价比之神"
},
{
"price": "¥49.9",
"original_price": "99900",
"title": "新款温柔风七彩短针织衫LD23031002",
"shop": "时尚女装",
"image": "https://s10.mogucdn.com/mlcdn/c45406/230507_46c25855gh4acgfbc6h198f9lel4e_1080x1080.jpg",
"tag": "小个子穿搭"
},
{
"price": "¥9.9",
"original_price": "69.90",
"title": "蝴蝶结发饰碎花头饰小香风超大蝴蝶结发夹",
"shop": "美发天地",
"image": "https://s10.mogucdn.com/mlcdn/c45406/231101_2ihe4e332j9568483b6abc7lkkjgb_750x750.jpg",
"tag": "高级潮酷范"
},
{
"price": "¥64.95",
"original_price": "9999.00",
"title": "羊驼/羊绒/羊毛V领针织开衫NYNG006X",
"shop": "时尚配饰",
"image": "https://s10.mogucdn.com/mlcdn/c45406/251120_7835fcig593fe1ghc89ec7197j5ha_1440x1920.jpg",
"tag": "OL风自制款"
},
{
"price": "¥499.9",
"original_price": "9999.00",
"title": "马可乔希韩版双面羊.毛大衣百搭轻奢显瘦气质冬战袍500",
"shop": "时尚女装",
"image": "https://s10.mogucdn.com/mlcdn/55cf19/251129_3cgjbc2abe3h03d9g718egkc840cg_4000x4000.jpg",
"tag": "超时尚穿搭"
},
{
"price": "¥79",
"original_price": "999.00",
"title": "黑色碎花短款吊带连衣裙LD23031029",
"shop": "时尚女装",
"image": "https://s10.mogucdn.com/mlcdn/c45406/230507_2h9i3848ad359gh9b5cjd136gkfci_1080x1080.jpg",
"tag": "好货聚集地"
},
{
"price": "¥29.8",
"original_price": "999.00",
"title": "新款圆领鱼骨正肩修身长袖外穿内搭打底衫纯色韩版上衣",
"shop": "时尚女装",
"image": "https://s10.mogucdn.com/mlcdn/c45406/250925_1b88jgk88k9dbdb6l0fbdk3cgceba_900x1200.jpg",
"tag": "小个子穿搭"
},
{
"price": "¥599",
"original_price": "9999.00",
"title": "新款女装设计感轻奢羽绒服外套保暖上衣 DL-367055",
"shop": "时尚配饰",
"image": "https://s10.mogucdn.com/mlcdn/55cf19/250927_1l244l97ih706aa7hga2k8j52h374_1200x1200.jpg",
"tag": "孤品收割机"
},
{
"price": "¥169.9",
"original_price": "9999.00",
"title": "HUA【163】温柔波点毛呢上衣+半身裙两件套",
"shop": "时尚女装",
"image": "https://s10.mogucdn.com/mlcdn/c45406/251119_5295ce13ij50dccdk3ab06ccd7kj1_1034x1354.jpg",
"tag": "超时尚穿搭"
},
{
"price": "¥9.9",
"original_price": "99.00",
"title": "布艺发饰 双面纯色法式蝴蝶结抓夹鲨鱼夹大号高级感盘发发夹",
"shop": "美发天地",
"image": "https://s10.mogucdn.com/mlcdn/c45406/221204_8abj88ffh7f7h9ei6ca4e55kje348_800x800.jpg",
"tag": "好货聚集地"
},
{
"price": "¥52.9",
"original_price": "999.00",
"title": "LOVEHEYNEW高腰a字半身裙女2023春新款百褶短裙3C130",
"shop": "时尚女装",
"image": "https://s10.mogucdn.com/mlcdn/c45406/230717_38h27l39h49acj1d542f61llda9bk_800x800.jpg",
"tag": "好货聚集地"
},
{
"price": "¥9.9",
"original_price": "99.00",
"title": "拍2免1 一次性高弹力皮筋1000条",
"shop": "美发天地",
"image": "https://s10.mogucdn.com/mlcdn/c45406/230217_03h82b0edai919b0ilhjl10l13eab_672x673.jpg",
"tag": "国民妹妹"
}
]
const addRandomData = () => {
const selectedIndices = new Set<number>();
const maxItems = Math.min(10, list.length);
while (selectedIndices.size < maxItems) {
let index = random(0, list.length - 1);
if (!selectedIndices.has(index)) {
selectedIndices.add(index);
let item = JSON.parse(JSON.stringify(list[index]));
flowList.value.push(item as UTSJSONObject);
}
}
}
onMounted(() => {
addRandomData();
})
onReachBottom(() => {
loadStatus.value = 'loading';
setTimeout(() => {
addRandomData();
loadStatus.value = 'loadmore';
}, 1500);
})
</script>
<style lang="scss" scoped>
.waterfall-page {
background-color: #e1e1e1 !important;
padding: 5px ;
}
.waterfall {
margin: 5px;
background-color: #ffffff;
position: relative;
border-radius: 8px;
&-wrapper {
padding: 10px;
}
&-title {
font-size: 14px;
color: #303133;
}
&-price {
margin-top: 5px;
display: flex;
flex-direction: row;
align-items: flex-end;
}
&-sale-price {
font-size: 15px;
color: #f56c6c;
}
&-original-price {
font-size: 12px;
color: #909193;
margin-left: 5px;
}
&-tag {
display: flex;
flex-direction: row;
margin-top: 5px;
}
&-tag-owner {
background-color: #f56c6c;
color: #ffffff;
padding: 2px 6px;
border-radius: 25px;
font-size: 10px;
line-height: 1;
}
&-tag-text {
border: 1px solid #3c9cff;
color: #3c9cff;
margin-left: 10px;
border-radius: 25px;
line-height: 1;
padding: 2px 6px;
border-radius: 25px;
font-size: 10px;
}
&-shop {
font-size: 11px;
color: #909193;
margin-top: 5px;
}
}
</style>注意事项
- 需要通过
v-model传递参数，将数据传递给组件，组件内部将每次新增的数据，通过动态查询左右列的高度 添加到高度低的一列。 - 组件有一个
add-time参数，用于将单条数据添加到队列的时间间隔，因为图片加载是需要时间的，所以瀑布流左右列 的高度会不定时改变，add-time值越大，对程序效果越好，但是对用户来说，越大值可能就是以能感受的速度一个一个添加 到队列尾部的，所以这是一个双面性的结果。 - 由于图片加载完成的时机是不确定的，导致图片加载完成时，队列的高度会发生改变，而且这个时机是无法确定的， 所以每次添加数据的时候，单次请求的所有数据中最后一个数据不一定能准确添加高度更低的队列一侧，但是可以保证下一次请求数据的第一条 能准确添加到队列高度低的一侧。
API
Props
| 参数 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| v-model | 瀑布流的列数据 | Array | - |
| column | 瀑布流的列数，不可动态修改 | Number | 2 |
| addTime | 单条数据添加到队列的时间间隔，单位ms，见上方注意事项说明 | Number | 100 |
Methods
这些为组件内部的方法，需要通过ref调用
| 参数 | 说明 |
|---|---|
| clear | 清空列表数据 |