瀑布流

瀑布流组件。

基础使用

• <pure-waterfall> 组件用于展示瀑布流布局。
• <pure-waterfall-item> 组件用于展示瀑布流项。

<pure-waterfall-item> 上有以下属性：

• index：必需，项的索引，组件按照 index 排序。
• loaded：必需，表示资源否加载完成，默认值为 false，当资源加载完成后，设置为 true，组件会自动更新布局。
• data：项的数据，如果设置了 data，组件内部会监听 data 数据，数据变化后会自动更新布局，如 item.title 变化后由一行标题变为了多行标题，组件监听到变化后会更新布局。

提示

• 如果展示的内容无媒体资源，可以直接设置 loaded 为 true。
• 如果 data 中无变化的数据，不需要设置 data 属性。

重要提示

如果列表项有媒体资源，需手动监听媒体资源加载完成的事件后，设置 loaded 为 true，组件会自动更新布局。

<template>
	<pure-waterfall>
		<pure-waterfall-item
			v-for="(item, index) in items"
			:key="index"
			:index="index"
			:loaded="item.loaded"
			:data="item"
		>
			<view class="item">
				<image
					class="item-image"
					mode="widthFix"
					:src="item.image"
					:key="item"
					@load="item.loaded = true"
				></image>
				<view class="item-content">
					<text class="item-title">{{ item.title }}</text>
					<text class="item-desc">{{ item.desc }}</text>
				</view>
			</view>
		</pure-waterfall-item>
	</pure-waterfall>
</template>

<script setup>
	import { ref } from "vue";

	// 瀑布流数据
	const items = ref([
		{
			image: "https://picsum.photos/200/300",
			title: "标题1",
			desc: "描述1",
			loaded: false
		},
		{
			image: "https://picsum.photos/200/300",
			title: "标题2",
			desc: "描述2",
			loaded: false
		},
		{
			image: "https://picsum.photos/200/300",
			title: "标题3",
			desc: "描述3",
			loaded: false
		}
	]);
</script>

属性

<pure-waterfall>

名称	类型	默认值	说明
cols	Number	2	列数
gap	String	10px	列表项之间的间距

<pure-waterfall-item>

名称	类型	默认值	说明
index	Number	0	项的索引
loaded	Boolean	false	资源是否加载完成
data	Object	undefined	项的数据

插槽

<pure-waterfall>

名称	参数	说明
#default		默认，放置 <pure-waterfall-item> 组件

<pure-waterfall-item>

名称	参数	说明
#default		默认，列表项内容