t-waterflow

Waterflow 瀑布流

组件介绍

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

平台兼容

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

基础用法

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

<template>
  <t-waterflow 
    :loadmore="true" 
    :refresherEnabled="true"
    @scrolltolower="loadMore"
    @refresherrefresh="onRefresh">
    <t-waterfall-item v-for="(item, index) in goods" :key="index">
      <view class="card">
        <image :src="item.image" mode="widthFix"></image>
        <text>{{ item.name }}</text>
        <text>{{ item.price }}</text>
      </view>
    </t-waterfall-item>
  </t-waterflow>
</template>

<script setup>
const goods = ref<UTSJSONObject[]>([])

function loadMore() {
}

function onRefresh() {
}
</script>

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

Events

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