Skip to content
On this page

组件库文档 tmui.design

瀑布流 Waterfall

瀑布流又称瀑布流式布局,是比较流行的一种网站页面布局,视觉表现为参差不齐的多栏布局,随着页面滚动条向下滚动。


🌶️ 瀑布流 Waterfall 示例

查看模拟效果
示例模板
vue
<template>
	<tm-app>
		
		<view class="flex flex-col flex-col-top-center">
			<tm-waterfall ref="wall" :width="718">
				<tm-waterfall-item @click="itemClick" :img="item.img" v-for="(item,index) in imglist">
					<view  class="pt-12 pb-12 px-12">
						<tm-text :label="item.text" _class="text-overflow-2"></tm-text>
						<view class="flex flex-row flex-row-bottom-start mt-24">
							<!-- <tm-text color="orange" :font-size="24" label='¥'></tm-text> -->
							<tm-text color="orange" _class="px-10" :font-size="36" :label='item.price'></tm-text>
							<tm-text color="grey" :font-size="24" :label='item.num'></tm-text>
						</view>
					</view>
				</tm-waterfall-item>
			</tm-waterfall>
		</view>

	</tm-app>
</template>
<script lang="ts" setup>
import {
	nextTick,
	ref
} from "vue";
import {
	onShow,
	onLoad
} from "@dcloudio/uni-app";
import tmApp from "@/tmui/components/tm-app/tm-app.vue"
import tmSheet from "@/tmui/components/tm-sheet/tm-sheet.vue"
import tmText from "@/tmui/components/tm-text/tm-text.vue"
import tmWaterfall from "@/tmui/components/tm-waterfall/tm-waterfall.vue"
import tmWaterfallItem from "@/tmui/components/tm-waterfall-item/tm-waterfall-item.vue"
import tmDivider from "@/tmui/components/tm-divider/tm-divider.vue"
const wall = ref<InstanceType<typeof tmWaterfall> | null>(null)
const imglist = ref([
	{
		img:'https://gw.alicdn.com/bao/uploaded/i2/1848622920/O1CN018zBHJ91XRPJ4bHW78_!!0-item_pic.jpg_320x320q90.jpg',
		text:"杨大爷麻辣香肠腊肠500克四川特产烟熏肉农家自制川味烤腊肉辣肠",
		price:"49",
		num:"3000+"
	},
	{
		img:'https://gw.alicdn.com/imgextra/i4/2207613550143/O1CN01hPpOvy1CvXQdlZLeC_!!2207613550143-0-alimamacc.jpg_q90.jpg',
		text:"",
		price:"200",
		num:"3000+"
	},
	{
		img:'https://gw.alicdn.com/bao/uploaded/i4/14498052/O1CN01pa6ScB29LrgfkRp8V_!!14498052.jpg_320x320q90.jpg',
		text:"带盖 酸奶杯一次性塑料布丁杯胖胖pp果冻杯慕斯甜品杯双皮奶100套",
		price:"12.8",
		num:"1500+"
	},
	{
		img:'https://images.pexels.com/photos/12640459/pexels-photo-12640459.jpeg?auto=compress&cs=tinysrgb&w=1600&lazy=load',
		text:"带盖 酸奶杯一次性塑料布丁杯胖胖pp果冻杯慕斯甜品杯双皮奶100套",
		price:"12.8",
		num:"1500+"
	},
	{
		img:'https://gw.alicdn.com/bao/uploaded/i4/1026973813/O1CN014Kirba1e2OrHg7gwN_!!1026973813.jpg_320x320q90.jpg',
		text:"带盖 酸奶杯一次性塑料布丁杯胖胖pp果冻杯慕斯甜品杯双皮奶100套",
		price:"12.8",
		num:"1500+"
	},
	{
		img:'https://gw.alicdn.com/imgextra/i3/23844911/O1CN01N1UxMS1m9Hs6gGu6E_!!23844911-0-alimamacc.jpg',
		text:"",
		price:"200",
		num:"3000+"
	},
	{
		img:'https://gw.alicdn.com/bao/uploaded/i4/2418392409/O1CN01zT4JbA1TfMoU30Uub_!!2418392409.jpg_320x320q90.jpg',
		text:"50枚挂耳咖啡滤袋日本材质手冲咖啡滤纸咖啡粉滤袋挂耳咖啡袋包邮",
		price:"12.8",
		num:"1500+"
	},
	{
		img:'https://gw.alicdn.com/bao/uploaded/i2/6000000001207/O1CN016TztFg1Kmqqrtarb0_!!6000000001207-0-picassoopen.jpg_320x320q90.jpg',
		text:"带盖 酸奶杯一次性塑料布丁杯胖胖pp果冻杯慕斯甜品杯双皮奶100套",
		price:"12.8",
		num:"1500+"
	},
	{
		img:'https://gw.alicdn.com/bao/uploaded/i3/2200531292142/O1CN01gFUdOw1Rh4vjN44sB_!!0-item_pic.jpg_320x320q90.jpg',
		text:"带盖 酸奶杯一次性塑料布丁杯胖胖pp果冻杯慕斯甜品杯双皮奶100套",
		price:"12.8",
		num:"1500+"
	},
])

function itemClick(){
	uni.navigateTo({
		url:"tree"
	})
}

</script>

🌶️ 兼容性

APP-VUEAPP-NVUE小程序WEB/H5VUE3/TS
✔️✔️✔️✔️✔️

🌱 参数

本组件含有公共属性 公共属性

参数名类型默认值描述
widthNumber750组件整体宽度
gutterNumber12元素之间的间距

🌽 slot插槽

注意,它内部只能放置tm-waterfall-item,且不能嵌套tm-waterfall tm-waterfall-item

🥗 ref方法

clear , 清空列表,记得清空后,如果要重新赋值一定要在nextTick里面赋值.

瀑布流子组件 Waterfall-Item

🌱 参数

参数名类型默认值描述
imgString''封面图片,可以为空
colorStringwhite主题颜色
roundNumber0圆角,0-25

🌹 事件

事件名参数返回数据描述
img-clickeitems图片被点击
clickeitems项目被点击

事件返回的数据不一定是准确的高,宽,位置,这些信息是异步的。只有整体项目完全渲染,图片加载完成,点击返回的数据才是准确的。因此 返回的数据没有什么意义仅供参考。 如果需要点击某一个项目来作逻辑,你在vfor渲染 @click=""时自行传递index,data数据。而不是用我的数据

ts
//items的结构:
{
	id: string|number, //子组件id,唯一。
	width: number,
	height: number,
	imgWidth: number,
	imgHeight: number,
	bottom: number,
	index: number,
	top: number,
	left: number,
}

💏 文档贡献

此页文档由Kyour贡献,如果对该框架感兴趣的可以参与我们一同进步!