Tui Plus Vapor

# t-waterflow

Waterflow 瀑布流

t-waterflow 组件介绍

t-waterflow 是瀑布流容器组件，用于多列不等高内容布局与滚动加载。配合 t-waterfall-item 使用实现瀑布流效果，支持下拉刷新和上拉加载更多。

t-waterflow 平台兼容

Harmony	H5	Android	iOS	小程序	UTS
✅	✅	✅	✅	✅	✅

t-waterflow 基础用法

基础用法参考 demo/waterflow/waterflow.uvue，配合 t-waterfall-item 使用。

vue

<template>
	<view :class="[`tpg f`]">
		<tui-theme-switch></tui-theme-switch>
		<t-card class="mlrt-15" title='Waterfal 瀑布流' sub-title="app端为官方瀑布流组件，虚拟滚动原理。只会渲染屏幕可见范围的元素"></t-card>
		<t-waterflow class="f mt-15" :loadmore="true" @scrolltolower="scrolltolower" :refresherEnabled="true"
			:refresher-threshold="100" :refresher-triggered="refresherTriggered" refresher-default-style="none"
			:main-axis-gap="10" :cross-axis-gap="10" @refresherrefresh="refresherrefresh">
			<t-waterfall-item v-for="(item,index) in goods" :key="index">
				<view :class="[`r-10 oh bst tvg`]">
					<image :src="`${item.goods_img}`" style="width: 100%;height: 200px;">
					</image>
					<view class="p-5">
						<text :class="[`slh-25 ttc-`]">{{item.goods_name}}</text>
						<text :class="[`slh-25 ttc-`]">索引：{{index}}</text>
						<t-text-price type="error" :decimals="2">{{item.shop_price}}</t-text-price>
					</view>
				</view>
			</t-waterfall-item>
			<t-waterfall-item slot="load-more" id="loadmore" :class="[`h-60 w-100% fc`]">
				<t-loadmore :status="loadmoreStatus" :line="false"></t-loadmore>
			</t-waterfall-item>
			<t-waterfall-item slot="refresher" :class="[`h-100 w-100% fc`]">
				<t-refresher :state="refresherState"></t-refresher>
			</t-waterfall-item>
		</t-waterflow>
	</view>
</template>

<script setup>
	import { TuiGuid, randomArray, sleep } from '@/uni_modules/tui-common'
	const cur = ref<number>(1)
	const goods = ref<UTSJSONObject[]>([])
	const loadmoreStatus = ref(1);
	const refresherState = ref(0);
	const refresherTriggered = ref(false)
	let timer = 0
	const list : UTSJSONObject[] = [
		{
			"goods_name": "便携式折叠电炒煮",
			"goods_id": 580,
			"goods_img": "https://cbu01.alicdn.com/img/ibank/O1CN01sIB82T1JaecYg06Mx_!!2212954981045-0-cib.jpg",
			"shop_price": "209.99",
			"sortKey": "861aeb9d-6961-4612-a774-0fa40a290463"
		},
		{
			"goods_name": "仙女暖暖裤套装暖暖套装女厚珊瑚绒家居套装外穿百搭宽松懒人套装",
			"goods_id": 183,
			"goods_img": "https://cbu01.alicdn.com/img/ibank/O1CN01uUUAy2273Qdy9KixX_!!1742327741-0-cib.jpg",
			"shop_price": "24.99",
			"sortKey": "c331efcc-5862-4087-8e7b-f3d01733ee41"
		},
		{
			"goods_name": "HIH玻尿酸护手精华液",
			"goods_id": 413,
			"goods_img": "https://cbu01.alicdn.com/img/ibank/O1CN01cJm8Da1GtwQde9Mxq_!!3953840681-0-cib.jpg",
			"shop_price": "7.99",
			"sortKey": "a7f5dfa4-a5f5-4629-8cdc-17d929c8e80f"
		},
		{
			"goods_name": "新爆款发热马甲智能加热马甲电热男女发热服恒温全身加热背心",
			"goods_id": 628,
			"goods_img": "https://cbu01.alicdn.com/img/ibank/O1CN01bnfmQA1o4MuTlOMGI_!!2214217985171-0-cib.jpg",
			"shop_price": "57.99",
			"sortKey": "586b2e55-20e7-4281-8793-38d6c7f649d1"
		},
		{
			"goods_name": "RUJI如肌微分子蓝铜胜肽修护次抛精华液",
			"goods_id": 408,
			"goods_img": "https://cbu01.alicdn.com/img/ibank/O1CN01alOaOX1Q3raTCsbvV_!!2208833191921-0-cib.jpg",
			"shop_price": "11.99",
			"sortKey": "aa2096b9-bd2b-4676-a7cd-194b12abf0b9"
		},
		{
			"goods_name": "多功能一体电热锅",
			"goods_id": 556,
			"goods_img": "https://cbu01.alicdn.com/img/ibank/O1CN01SqiVz52IJsdD71133_!!4078739266-0-cib.jpg",
			"shop_price": "58.99",
			"sortKey": "1f6d9819-4044-467c-bc82-78e65254823b"
		},
		{
			"goods_name": "黄鸭不锈钢电煮锅",
			"goods_id": 586,
			"goods_img": "https://cbu01.alicdn.com/img/ibank/O1CN01nVEwL22NMhD2zxDGp_!!1011719949-0-cib.jpg",
			"shop_price": "20.99",
			"sortKey": "5a127d47-ba77-4d76-aa8d-58ce7fd179d7"
		},
		{
			"goods_name": "负离子导入仪 家用面部祛斑精华液",
			"goods_id": 395,
			"goods_img": "https://cbu01.alicdn.com/img/ibank/O1CN01pi34az1Mukpf4EFF3_!!4185071495-0-cib.jpg",
			"shop_price": "17.99",
			"sortKey": "509db427-0b20-4b49-822d-9a3118c6014c"
		},
		{
			"goods_name": "手工兔子中秋灯笼diy材料包古风手提玉兔花灯卡通中秋节礼物",
			"goods_id": 284,
			"goods_img": "https://cbu01.alicdn.com/img/ibank/O1CN014oobfK1tlUD072U98_!!3837835942-0-cib.jpg",
			"shop_price": "3.99",
			"sortKey": "5e7c70c9-3441-42c6-a4f5-2ff55f025c35"
		},
		{
			"goods_name": "一代马卡龙伸缩收纳支架三合一充电线logo礼品一拖三数据线",
			"goods_id": 376,
			"goods_img": "https://cbu01.alicdn.com/img/ibank/O1CN01fBWm9k1JZHRcDKv7p_!!2213311141042-0-cib.jpg",
			"shop_price": "9.99",
			"sortKey": "8753789e-b24e-4a8f-846d-75442982ba43"
		},
		{
			"goods_name": "咬一口数据线保护套适用于苹果充电线充电防折断固线器",
			"goods_id": 382,
			"goods_img": "/goods/20230308/4bdc250221ee43cb45d55f4501d9145f.jpg",
			"shop_price": "8.99",
			"sortKey": "a7a0f024-a250-4bef-9a94-24325c66b375"
		},
		{
			"goods_name": "瓷雅多肽修护冻干粉套盒",
			"goods_id": 423,
			"goods_img": "https://cbu01.alicdn.com/img/ibank/O1CN01Aj0UGc1Nky1ajzyGv_!!3020621609-0-cib.jpg",
			"shop_price": "84.99",
			"sortKey": "10e41bcb-4f6f-414c-ab97-089ae5aed408"
		},
		{
			"goods_name": "光腿神器秋冬加绒加厚肤色丝袜女外穿裸感无痕显瘦打底连裤袜G15",
			"goods_id": 347,
			"goods_img": "https://cbu01.alicdn.com/img/ibank/O1CN01zqrkRk1Qz73Q0vGvI_!!2211886552046-0-cib.jpg",
			"shop_price": "7.99",
			"sortKey": "df75a9b8-3435-4a2f-8a9e-5580a357ca24"
		},
		{
			"goods_name": "适用于opporeno8钢化膜 K10全屏pro全透明reno7高清A93手机6膜A97",
			"goods_id": 363,
			"goods_img": "https://cbu01.alicdn.com/img/ibank/O1CN01yN0Psn1fphCgEzUdV_!!2214235314056-0-cib.jpg",
			"shop_price": "8.99",
			"sortKey": "8bf339c2-39cb-465d-a310-f1c3caee1f47"
		},
		{
			"goods_name": "韩版简约情侣双肩包",
			"goods_id": 621,
			"goods_img": "https://cbu01.alicdn.com/img/ibank/O1CN01N0WVDD1OM49NpOuxj_!!2214682831690-0-cib.jpg",
			"shop_price": "22.99",
			"sortKey": "2a7dcc41-fd59-42a1-a21b-341b0dee9be2"
		},
		{
			"goods_name": "德国OIDIRE电煮锅",
			"goods_id": 555,
			"goods_img": "https://cbu01.alicdn.com/img/ibank/O1CN015tbiVe2DH4CvMAyHR_!!2550168583-0-cib.jpg",
			"shop_price": "119.99",
			"sortKey": "52142154-3a24-45ba-9f04-351bd75c2433"
		},
		{
			"goods_name": "时尚简约游旅行背包",
			"goods_id": 613,
			"goods_img": "https://cbu01.alicdn.com/img/ibank/O1CN01EGgrPN1k00ZvuWbjE_!!2212762114620-0-cib.jpg",
			"shop_price": "42.99",
			"sortKey": "7811f364-c1e0-440e-9449-748f3f0c5f25"
		},
		{
			"goods_name": "国药集团美容院烟酰胺原液修护肌肤屏玻尿酸补水障美白淡斑精华液",
			"goods_id": 400,
			"goods_img": "https://cbu01.alicdn.com/img/ibank/O1CN01TjZNcV1NKP5PEoPKd_!!3378701551-0-cib.jpg",
			"shop_price": "16.99",
			"sortKey": "6b63ccd0-b42e-4c50-aecb-90df22e543bd"
		},
		{
			"goods_name": "全优冲刺100分试卷一二三四五六年级上下册小学生语文数学模拟卷",
			"goods_id": 301,
			"goods_img": "https://cbu01.alicdn.com/img/ibank/O1CN01fqZaqo2B0v0RjVTR1_!!2005738277-0-cib.jpg",
			"shop_price": "2.99",
			"sortKey": "8a3a6611-36b2-49f1-962c-d49dda26b299"
		},
		{
			"goods_name": "不锈钢小剪刀办公文具剪剪纸剪刘海剪子线头剪手工剪纸家用",
			"goods_id": 272,
			"goods_img": "https://cbu01.alicdn.com/img/ibank/O1CN010bmrJ71KJzrTPQb0Y_!!3984911144-0-cib.jpg",
			"shop_price": "4.99",
			"sortKey": "ca3c6bc7-3b2a-4b32-a32e-714233bd743f"
		}
	]
	function getGoodsList() {
		goods.value.push(...list)
	}
	getGoodsList()
	function scrolltolower() {
		if (loadmoreStatus.value != 3) loadmoreStatus.value = 2;
		cur.value++
		getGoodsList()
	}
	function refresherrefresh() {
		refresherState.value = 2;
		refresherTriggered.value = true;
		goods.value = []
		nextTick(() => {
			goods.value = randomArray(list) as UTSJSONObject[]
			clearTimeout(timer)
			timer = setTimeout(() => {
				refresherTriggered.value = false;
			}, 2000)
		})
	}
	onUnload(() => {
		clearTimeout(timer)
	})
</script>

t-waterflow Props

属性名	说明	类型	默认值
`crossAxisCount`	列数	`number`	`2`
`mainAxisGap`	主轴间距	`number`	`10`
`crossAxisGap`	交叉轴间距	`number`	`10`
`padding`	内边距 [上,右,下,左]	`number[]`	`[10, 10, 10, 10]`
`loadmore`	是否开启上拉加载	`boolean`	`false`
`loadmoreBoxClass`	加载更多区域样式	`string`	`''`
`refresherEnabled`	是否开启下拉刷新	`boolean`	`false`
`refresherThreshold`	下拉刷新阈值	`number`	`45`
`refresherMaxDragDistance`	下拉最大距离	`number`	`80`
`refresherBackground`	下拉刷新区域背景色	`string`	`'transparent'`
`refresherTriggered`	是否触发下拉刷新	`boolean`	`false`
`refresherBoxClass`	下拉刷新区域样式	`string`	`''`
`bounces`	是否开启回弹	`boolean`	`true`
`showScrollbar`	是否显示滚动条	`boolean`	`false`
`scrollTop`	滚动位置	`number`	`0`
`scrollIntoView`	滚动到指定元素	`string`	`''`
`scrollWithAnimation`	滚动是否使用动画	`boolean`	`true`
`upperThreshold`	距顶部多远触发事件	`number`	`50`
`lowerThreshold`	距底部多远触发事件	`number`	`50`

t-waterflow Events

事件名	说明	回调参数
`scrolltolower`	滚动到底部时触发	`() => void`
`scrolltoupper`	滚动到顶部时触发	`() => void`
`scroll`	滚动时触发	`(e: UniScrollEvent) => void`
`scrollend`	滚动结束时触发	`() => void`
`refresherrefresh`	下拉刷新时触发	`() => void`
`refresherpulling`	下拉过程中触发	`(e: UniEvent) => void`
`refresherrestore`	下拉刷新复位时触发	`() => void`
`refresherabort`	下拉刷新中止时触发	`() => void`

t-waterflow 组件介绍 ​

t-waterflow 平台兼容 ​

t-waterflow 基础用法 ​

t-waterflow Props ​

t-waterflow Events ​

t-waterflow 组件介绍

t-waterflow 平台兼容

t-waterflow 基础用法

t-waterflow Props

t-waterflow Events