瀑布流 xWaterfall

---

在线预览

在线模拟尺寸:

介绍

可以通过columnu来控制排版列数，默认是2列排版。可以无限加载不卡,全异步流加载.使用时请参考demo布局,已精心为你规划如何提高性能.

平台兼容

Harmony	H5	andriod	IOS	小程序	UTS	UNIAPP-X SDK	version
☑	☑	☑️	☑️	☑️	☑️	4.76+	1.1.18

文件路径

@/uni_modules/tmx-ui/components/x-waterfall/x-waterfall.uvue

使用

<x-waterfall></x-waterfall>

Props 属性

名称	说明	类型	默认值
column	瀑布流的列数 不可动态动态更改。	number	2
listCount	用来刷新数据的，你可以通过你的外面list.length来传递进来 比如为0时，自动清空瀑布流数据。	number	0
gutter	间距,单位不能为%比，可以是数字字符，带rpx,px等单位 默认的数字符单位是全局的unit单位。	string	'8'
isResize	是否响应尺寸监测。设置为false可以关闭 关闭后能增加性能。	boolean	false
disabledScroll	``	boolean	false

Events 事件

名称	参数	说明
bottom	-	-
top	-	-

Slots 插槽

名称	说明	数据
default	只能放置直接子节点x-waterfall-item	-

Ref 方法

名称	参数	返回值	说明
pushChild	-	-	-
nextRender	-	-	-
removeChild	-	-	-

示例文件路径

/pages/zhanshi/waterfall

示例源码

uvue

<template>
	<!-- #ifdef APP -->
	<scroll-view style="flex:1">
	<!-- #endif -->
	<!-- #ifdef MP-WEIXIN -->
	<page-meta :page-style="`background-color:${xThemeConfigBgColor}`">
		<navigation-bar :background-color="xThemeConfigNavBgColor" :front-color="xThemeConfigNavFontColor"></navigation-bar>
	</page-meta>
	<!-- #endif -->
		<x-sheet>
			<x-text font-size="18" class=" text-weight-b mb-8">瀑布流 xWaterfall</x-text>
			<x-text color="#999999">可以通过columnu来控制排版列数，默认是2列排版。另外理论上子节点数量不限制的，渲染也不会卡,全为异步加载,请根据demo布局你的长列表瀑布流.不要在子节点中布局自定义节点,请完全使用原生节点.</x-text>
		</x-sheet>
		<x-sheet>
			<x-text color="#999999">本页面是一个页面滚动与瀑布流滚动相互协商滚动的一个案例，应用非常广泛。</x-text>
		</x-sheet>
		<view ref="waterScroll" class="px-8 " :style="{height:`${windowHeight}px`}" >
			<x-waterfall @bottom="loadmore" :disabledScroll="disabledScroll" :list-count="list.length">
				<x-waterfall-item v-for="(item,index) in list" :order="index" :key="index">
					<template v-slot:default="col">
						<view class="pa-8" :style="{borderRadius:'6px',backgroundColor:bgColorOfView}">
							<image  style="width:100%;height:120px;border-radius:8px;":src="`https://store.tmui.design/api/randomImg?random=18${index}`"></image>
							<text class="mt-16" :style="{color:textColorOfView,fontSize:'15px',lineHeight:'1.4'}" >{{item}}</text>
						</view>
					</template>
				</x-waterfall-item>
			</x-waterfall>
		</view>
		
	<!-- #ifdef APP -->
	</scroll-view>
	<!-- #endif -->
</template>

<script setup lang="uts">
	import { xStore, xDate } from "@/uni_modules/tmx-ui/index.uts"
	const strs = '今年4月15日是第九个全民国家安全教育日。《环球时报》记者观察发现，今年“4·15”前后，国更加隐蔽。除国家安全传统领域外，关乎国计国家安全问题专家在接受《环球时报》记者采访时表示，反间也是广大人民群众的义务。'
	const list = ref<string[]>([])
	const loading = ref<boolean>(false)
	const bgColorOfView = computed(():string=> xStore.xConfig.dark == 'dark'?xStore.xConfig.sheetDarkColor:'white')
	const textColorOfView = computed(():string=> xStore.xConfig.dark == 'dark'?'white':'#333333')
	const windowHeight = ref(0)
	const windowTop = ref(0)
	const waterScroll = ref<UniElement|null>(null)
	const disabledScroll = ref(true)
	function randomData() {
	
		let total = list.value.length;
		for (let i = 0; i < 14; i++) {
			let start = Math.max(0, Math.min(Math.random() * strs.length, strs.length))
			list.value.push((total + i).toString() + strs.substring(start))
		}
	}
	function onloadata() {
		uni.showLoading({ title: '...', mask: true })
		loading.value = true;
		setTimeout(function () {
			randomData();
			loading.value = false;
			uni.hideLoading()
			uni.stopPullDownRefresh()
		}, 1000);
	
	}
	
	onReady(()=>{
		const sys = uni.getWindowInfo();
		windowHeight.value = sys.windowHeight
		windowTop.value = sys.windowTop
		randomData();
	})
	onPullDownRefresh(()=>{
		list.value = [] as string[]
		onloadata();
	})
	// 通过查询节点来协商是否允许滚动
	function getNodes(){
		let ele = waterScroll.value;
		if(ele == null) return;
		ele.getBoundingClientRectAsync()?.then((drect)=>{
			if(drect.top<=windowTop.value){
				disabledScroll.value = false
			}else{
				disabledScroll.value = true
			}
		})
	}
	function loadmore() {
		if (loading.value) return;
		onloadata();
	}
	onPageScroll(()=>{
		getNodes()
	})
	// onReachBottom(()=>{
	// 	loadmore()
	// })

</script>

<style lang="scss">

</style>