Waterfall 瀑布流

参数

参数	说明	类型	默认值
column	列数量	number	2
gutter	间隔	number	20
nodeKey	匹配值	string	id
方法

事件名称	说明	参数
refresh	刷新列表	function(list:any[])
append	追加数据	function(list:any[])
clear	清空数据	function()
update	更新数据	function(nodeKey, data:any)
示例

usePager 分页操作
<template>
	<cl-page :padding="20">
		<cl-waterfall ref="Waterfall" :column="2">
			<template #default="{ list }">
				<cl-waterfall-column v-for="(item, index) in list" :key="index">
					<view class="goods-item" v-for="(item2, index2) in item" :key="index2">
						<image :src="item2.url" mode="widthFix"></image>
						<cl-text :value="item2.title" :margin="10"></cl-text>
					</view>
				</cl-waterfall-column>
			</template>
		</cl-waterfall>
	</cl-page>
</template>

<script lang="ts" setup>
	import { onReady } from "@dcloudio/uni-app";
	import { ref } from "vue";
	import { usePager } from "/@/cool";

	const { onRefresh, onAppend } = usePager();

	const Waterfall = ref<ClWaterfall.Ref>();

	function refresh(params?: any) {
		const { data, next } = onRefresh(params);

		onAppend((list) => {
			if (data.page == 1) {
				Waterfall.value?.refresh(list);
			} else {
				Waterfall.value?.append(list);
			}
		});

		return next(
			new Promise((resolve) => {
				setTimeout(() => {
					resolve({
						list: [
							{
								title: "Watslim 擦窗机器人全自动智能遥控电动擦窗机神器 智能款",
								url: "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fhbimg.b0.upaiyun.com%2F47d3d4dab03cd71a8800c389d4dd8d5928ab826c37ac3-Vck8iS_fw658&refer=http%3A%2F%2Fhbimg.b0.upaiyun.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1654339724&t=ec32099a3891504569cb6ec390154c54"
							},
							{
								title: "富士instax立拍立得 一次成像相机 mini11 冰晶白",
								url: "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fhbimg.b0.upaiyun.com%2Feed5cf6958521b0b9e36bb9f28b90d59caffa5e1a661-MdQUZ1_fw658&refer=http%3A%2F%2Fhbimg.b0.upaiyun.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1654339724&t=16e5d80bab1e1fb385c3e8e14d11e0dd"
							},
							{
								title: "syitren Syitren PARON赛塔林黑胶唱片机HIFi复古",
								url: "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fhbimg.b0.upaiyun.com%2F438d277c48a7364d7f5c9947e5cab9b8928de5131b023-llMbUl_fw658&refer=http%3A%2F%2Fhbimg.b0.upaiyun.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1654339724&t=c648048f6b243018dc3d98c4c2191d15"
							},
							{
								title: "华为路由AX3 凌霄双核/wifi6/智能分频3000M/高速路由器",
								url: "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fhbimg.b0.upaiyun.com%2Fed5b7cc0611afb58821f6efa2ccbfc9f9c3f14c11c3a1-2dUtHQ_fw658&refer=http%3A%2F%2Fhbimg.b0.upaiyun.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1654339724&t=2d4e188339ad12fdceac4217ed6e0e5e"
							},
							{
								title: "千幻魔镜 十代 vr眼镜手机VR 智能3D眼镜VR游戏头盔",
								url: "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fhbimg.b0.upaiyun.com%2F111d7605120959a2ca836310277f8daf42855ec639e87-kzE5gK_fw658&refer=http%3A%2F%2Fhbimg.b0.upaiyun.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1654339724&t=5e37c84f9f506f05e812031c660fe56b"
							},
							{
								title: "神火（supfire） X60-T强光手电筒变焦远射USB充电式",
								url: "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fhbimg.b0.upaiyun.com%2F8813230e61b64518e74f2b1b088e96036d62d79231874-bkqhNM_fw658&refer=http%3A%2F%2Fhbimg.b0.upaiyun.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1654339724&t=0ac1b94c1d8e7478c122dadcd6b3915b"
							}
						],
						pagination: {
							total: 100,
							page: data.page,
							size: 20
						}
					});
				}, 1000);
			})
		);
	}

	onReady(() => {
		refresh();
	});

	defineExpose({
		refresh
	});
</script>

<style lang="scss" scoped>
	.goods-item {
		margin-bottom: 20rpx;
		border: 1rpx solid #eee;
		border-radius: 8rpx;
		overflow: hidden;
		background-color: #fff;

		image {
			display: block;
			width: 100%;
		}
	}
</style>
# Waterfall 瀑布流

# 参数

# 方法

# 示例

Waterfall 瀑布流

参数

方法

示例
