From bca9f0efc99f4701405cfc5dc33c6c3edef31722 Mon Sep 17 00:00:00 2001
From: helang <helang.love@qq.com>
Date: Fri, 4 Oct 2024 00:12:25 +0800
Subject: [PATCH 1/4] =?UTF-8?q?feat:=20=E7=80=91=E5=B8=83=E6=B5=81=20-=20?=
 =?UTF-8?q?=E6=94=B9=E7=89=88?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/waterfall/js/utils.js          |   7 +
 .../components/waterfall/waterfall-col.vue    |  60 +++++
 .../components/waterfall/waterfall-item.vue   |  68 +----
 ...rfall-list - \345\211\257\346\234\254.vue" | 238 +++++++++++++++++
 .../components/waterfall/waterfall-list.vue   |  80 ++----
 .../waterfall - \345\211\257\346\234\254.vue" | 247 ++++++++++++++++++
 .../pages/waterfall/waterfall.vue             |  67 ++---
 7 files changed, 620 insertions(+), 147 deletions(-)
 create mode 100644 uniapp-extend/uni_modules/helang-waterfall/components/waterfall/js/utils.js
 create mode 100644 uniapp-extend/uni_modules/helang-waterfall/components/waterfall/waterfall-col.vue
 create mode 100644 "uniapp-extend/uni_modules/helang-waterfall/components/waterfall/waterfall-list - \345\211\257\346\234\254.vue"
 create mode 100644 "uniapp-extend/uni_modules/helang-waterfall/pages/waterfall/waterfall - \345\211\257\346\234\254.vue"

diff --git a/uniapp-extend/uni_modules/helang-waterfall/components/waterfall/js/utils.js b/uniapp-extend/uni_modules/helang-waterfall/components/waterfall/js/utils.js
new file mode 100644
index 0000000..e310703
--- /dev/null
+++ b/uniapp-extend/uni_modules/helang-waterfall/components/waterfall/js/utils.js
@@ -0,0 +1,7 @@
+export const wait = (time = 100)=>{
+	return new Promise((resolve)=>{
+		setTimeout(()=>{
+			resolve();
+		},time);
+	})
+}
\ No newline at end of file
diff --git a/uniapp-extend/uni_modules/helang-waterfall/components/waterfall/waterfall-col.vue b/uniapp-extend/uni_modules/helang-waterfall/components/waterfall/waterfall-col.vue
new file mode 100644
index 0000000..6e28ae6
--- /dev/null
+++ b/uniapp-extend/uni_modules/helang-waterfall/components/waterfall/waterfall-col.vue
@@ -0,0 +1,60 @@
+<template>
+	<view class="waterfall-col" :style="{width:colWidth}">
+		<slot name="default"></slot>
+	</view>
+</template>
+
+<script>
+	
+		
+	export default {
+		name:"helangWaterfallCol",
+		options:{
+			virtualHost: true
+		},
+		components: {
+			
+		},
+		props:{
+			// 组件状态
+			colWidth:{
+				type: String,
+				default:''
+			},
+		},
+		watch:{
+			
+		},
+		computed:{
+			
+		},
+		data() {
+			return {
+				// 左侧列表高度
+				leftHeight: 0,
+				// 右侧列表高度
+				rightHeight: 0,
+				// 左侧列表数据
+				leftList: [],
+				// 右侧列表数据
+				rightList: [],
+				// 待渲染列表
+				awaitRenderList:[],
+				// 当前展示页码数据
+				showPage:1
+			}
+		},
+		mounted() {
+			
+		},
+		methods: {
+			
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+	.waterfall-col{
+		padding:0 10rpx;
+	}
+</style>
\ No newline at end of file
diff --git a/uniapp-extend/uni_modules/helang-waterfall/components/waterfall/waterfall-item.vue b/uniapp-extend/uni_modules/helang-waterfall/components/waterfall/waterfall-item.vue
index 258a15d..eb7183c 100644
--- a/uniapp-extend/uni_modules/helang-waterfall/components/waterfall/waterfall-item.vue
+++ b/uniapp-extend/uni_modules/helang-waterfall/components/waterfall/waterfall-item.vue
@@ -1,20 +1,11 @@
 <template>
-	<view class="waterfall-item-container">
-		<view class="waterfall-item" @tap="onTap">
-			<image :src="params.url" mode="widthFix" @load="emitHeight" @error="emitHeight"></image>
-			<view class="content">
-				<view>{{params.title}}</view>
-				<view class="money">{{params.money}}元</view>
-				<view style="margin: 0 0 8rpx 0;">
-					<text class="label">{{params.label}}</text>
-				</view>
-				<view class="shop-name">{{params.shop}}</view>
-			</view>
-		</view>
+	<view class="waterfall-item">
+		<slot name="default"></slot>
 	</view>
 </template>
 
 <script>
+	import { wait } from './js/utils.js';
 	export default {
 		name:"helangWaterfallItem",
 		options:{
@@ -41,57 +32,22 @@
 				
 			};
 		},
+		mounted() {
+			this.postHeight();
+		},
 		methods:{
-			// 发出组件高度信息，在此处可以区分正确和错误的加载，给予错误的提示图片
-			emitHeight(e){
-				const query = uni.createSelectorQuery().in(this);
-				query.select('.waterfall-item-container').boundingClientRect(data => {
-					let height = Math.floor(data.height);
-					this.$emit("height",height,this.$props.tag);
-				}).exec();
-			},
-			onTap(){
-				this.$emit("click",this.$props.index,this.$props.tag);
+			async postHeight(){
+				await wait(100);
+				this.$emit("height",'321312');
 			}
 		}
 	}
 </script>
 
 <style lang="scss" scoped>
-.waterfall-item{
-	padding: 16rpx;
-	background-color: #fff;
-	border-radius: 4px;
-	font-size: 28rpx;
-	color: #666;
-	
-	image{
-		display: block;
-		width: 100%;
-		// 默认设置一个图片的大约值
-		height: 350rpx;
-	}
-	
-	.content{
-		margin-top: 16rpx;
-		
-		.money{
-			color: #fa3534;
-			margin-top: 8rpx;
-		}
-		
-		.label{
-			background-color: #fa3534;
-			color: #fff;
-			font-size: 20rpx;
-			padding: 4rpx 16rpx;
-			border-radius: 20rpx;
-		}
-		
-		.shop-name{
-			font-size: 20rpx;
-			color: #999;
+	.waterfall-item{
+		& + .waterfall-item{
+			margin-top:20rpx;
 		}
 	}
-}
 </style>
diff --git "a/uniapp-extend/uni_modules/helang-waterfall/components/waterfall/waterfall-list - \345\211\257\346\234\254.vue" "b/uniapp-extend/uni_modules/helang-waterfall/components/waterfall/waterfall-list - \345\211\257\346\234\254.vue"
new file mode 100644
index 0000000..688c961
--- /dev/null
+++ "b/uniapp-extend/uni_modules/helang-waterfall/components/waterfall/waterfall-list - \345\211\257\346\234\254.vue"	
@@ -0,0 +1,238 @@
+<template>
+	<view>
+		<view class="waterfall-box h-flex-x h-flex-2" v-if="showList">
+			<view>
+				<view v-for="(item,index) in leftList" :key="item._render_id" 
+					class="list-item" 
+					:class="{'show': showPage > item._current_page }"
+				>
+					<helang-waterfall-item
+						:params="item" 
+						tag="left"
+						:index="index"
+						@height="onHeight"
+						@click="onClick"
+					></helang-waterfall-item>
+				</view>
+			</view>
+			<view>
+				<view v-for="(item,index) in rightList" :key="item._render_id" 
+					class="list-item"
+					:class="{'show': showPage > item._current_page }"
+				>
+					<helang-waterfall-item
+						:params="item" 
+						@height="onHeight"
+						@click="onClick"
+						tag="right"
+						:index="index"
+					></helang-waterfall-item>
+				</view>
+			</view>
+		</view>
+		
+		<slot name="default"></slot>
+	</view>
+</template>
+
+<script>
+	import helangWaterfallItem from "./waterfall-item.vue"
+		
+	export default {
+		name:"helangWaterfallList",
+		options:{
+			virtualHost: true
+		},
+		components: {
+			"helang-waterfall-item": helangWaterfallItem
+		},
+		props:{
+			// 组件状态
+			status:{
+				type: String,
+				default:''
+			},
+			// 待渲染的数据
+			list:{
+				type: Array,
+				default(){
+					return [];
+				}
+			},
+			// 重置列表，设置为 true 时，瀑布流会自动重新渲染列表
+			reset:{
+				type: Boolean,
+				default:false
+			},
+		},
+		watch:{
+			"$props.status"(newValue,oldValue){
+				// 状态变更为 加载成功 时，执行瀑布流数据渲染	
+				if(newValue == 'success'){
+					this.startRender();
+				}else if(!this.showList){
+					this.resetData();
+				}
+			}
+		},
+		computed:{
+			showList(){
+				return !["fail","empty"].includes(this.$props.status);
+			}
+		},
+		data() {
+			return {
+				// 左侧列表高度
+				leftHeight: 0,
+				// 右侧列表高度
+				rightHeight: 0,
+				// 左侧列表数据
+				leftList: [],
+				// 右侧列表数据
+				rightList: [],
+				// 待渲染列表
+				awaitRenderList:[],
+				// 当前展示页码数据
+				showPage:1
+			}
+		},
+		mounted() {
+			if(this.$props.status == 'success'){
+				this.startRender();
+			}
+		},
+		methods: {
+			// 监听高度变化
+			onHeight(height, tag) {
+				/**
+				 * 这个为实际渲染后 CSS 中 margin-buttom 的值，本示例默认为20rpx
+				 * 用于解决实际渲染后因为数据条数关系，高度差计算偏差的问题
+				 * */
+				let marginBottom = uni.upx2px(20);
+				
+				// console.log(`左高：${this.leftHeight},右高：${this.rightHeight},当前高：${height},插入方向：${tag}`)
+				
+				if (tag == 'left') {
+					this.leftHeight += (height + marginBottom);
+				} else {
+					this.rightHeight += (height + marginBottom);
+				}
+				this.renderList();
+			},
+			// 组件点击事件
+			onClick(index, tag){
+				// 对应的数据
+				if(tag == 'left'){
+					this.$emit("click",this.leftList[index],index,tag);
+				}else{
+					this.$emit("click",this.rightList[index],index,tag);
+				}
+			},
+			// 渲染列表，这里实现瀑布流的左右分栏
+			renderList() {
+				// 待渲染长度为 0 时表示已渲染完成
+				if(this.awaitRenderList.length < 1){
+					this.showPage++;
+					this.$emit("done");
+					
+					// 为防止 js 数值类型最大值溢出，当高度值大于 1亿时重置高度
+					if(this.leftHeight > 100000000){
+						if(this.leftHeight > this.rightHeight){
+							this.leftHeight = 2;
+							this.rightHeight = 1;
+						}else{
+							this.leftHeight = 1;
+							this.rightHeight = 2;
+						}
+					}
+					return;
+				}
+				let item = {
+					...this.awaitRenderList.splice(0,1)[0],
+					// 当前数据添加当前页面标识
+					_current_page:this.showPage,
+					// 当前数据添加一个渲染id，解决 v-for 重复会出现不执行 load 的 BUG
+					_render_id:new Date().getTime()
+				};
+				
+				if(this.leftHeight > this.rightHeight){
+					this.rightList.push(item);
+				}else{
+					this.leftList.push(item);
+				}
+			},
+			// 重置数据
+			resetData(){
+				this.leftHeight = 0;
+				this.rightHeight = 0;
+				this.leftList = [];
+				this.rightList = [];
+				this.awaitRenderList = [];
+				// 当前展示页码数据
+				this.showPage = 1;
+			},
+			// 启动渲染
+			startRender(){
+				if(!this.showList){
+					this.resetData();
+					return;
+				}
+				
+				if(!this.$props.list || this.$props.list.length < 1){
+					console.log('河浪瀑布流插件提示：当前数据为空，不会触发列表渲染');
+					return;
+				}
+				
+				// 若本次渲染为 重置 则先恢复组件的默认参数
+				if(this.$props.reset){
+					this.resetData();
+				}
+				
+				this.awaitRenderList = [...this.$props.list];
+				this.renderList();
+			}
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+	.waterfall-box {
+		padding: 20rpx 10rpx;
+		box-sizing: border-box;
+
+		>view {
+			padding: 0 10rpx;
+		}
+		
+		.list-item{
+			margin-bottom: 0;
+			// 设置透明，默认是可视的
+			opacity: 0;
+			// 默认超出隐藏，不影响加载中的文字显示效果
+			overflow: hidden;
+			height: 0;
+			
+			&.show{
+				margin-bottom: 20rpx;
+				opacity: 1;
+				overflow: auto;
+				height: auto;
+			}
+		}
+	}
+
+	.h-flex-x {
+		display: flex;
+		flex-direction: row;
+		flex-wrap: nowrap;
+		justify-content: flex-start;
+		align-items: flex-start;
+		align-content: flex-start;
+
+		&.h-flex-2 {
+			>view {
+				width: 50%;
+			}
+		}
+	}
+</style>
\ No newline at end of file
diff --git a/uniapp-extend/uni_modules/helang-waterfall/components/waterfall/waterfall-list.vue b/uniapp-extend/uni_modules/helang-waterfall/components/waterfall/waterfall-list.vue
index 688c961..7f903d8 100644
--- a/uniapp-extend/uni_modules/helang-waterfall/components/waterfall/waterfall-list.vue
+++ b/uniapp-extend/uni_modules/helang-waterfall/components/waterfall/waterfall-list.vue
@@ -1,52 +1,28 @@
 <template>
 	<view>
-		<view class="waterfall-box h-flex-x h-flex-2" v-if="showList">
-			<view>
-				<view v-for="(item,index) in leftList" :key="item._render_id" 
-					class="list-item" 
-					:class="{'show': showPage > item._current_page }"
-				>
-					<helang-waterfall-item
-						:params="item" 
-						tag="left"
-						:index="index"
-						@height="onHeight"
-						@click="onClick"
-					></helang-waterfall-item>
-				</view>
-			</view>
-			<view>
-				<view v-for="(item,index) in rightList" :key="item._render_id" 
-					class="list-item"
-					:class="{'show': showPage > item._current_page }"
-				>
-					<helang-waterfall-item
-						:params="item" 
-						@height="onHeight"
-						@click="onClick"
-						tag="right"
-						:index="index"
-					></helang-waterfall-item>
-				</view>
+		<view class="waterfall-box">
+			<view class="h-flex-x helang-waterfall-slot">
+				<slot name="default" v-bind:colWidth="colWidth" v-bind:list="list"></slot>
 			</view>
 		</view>
-		
-		<slot name="default"></slot>
 	</view>
 </template>
 
 <script>
-	import helangWaterfallItem from "./waterfall-item.vue"
-		
 	export default {
 		name:"helangWaterfallList",
 		options:{
 			virtualHost: true
 		},
 		components: {
-			"helang-waterfall-item": helangWaterfallItem
+			
 		},
 		props:{
+			// 分栏
+			col:{
+				type: Number,
+				default:2
+			},
 			// 组件状态
 			status:{
 				type: String,
@@ -76,8 +52,8 @@
 			}
 		},
 		computed:{
-			showList(){
-				return !["fail","empty"].includes(this.$props.status);
+			colWidth(){
+				return `${1 / this.$props.col * 100}%`;
 			}
 		},
 		data() {
@@ -86,20 +62,16 @@
 				leftHeight: 0,
 				// 右侧列表高度
 				rightHeight: 0,
-				// 左侧列表数据
-				leftList: [],
-				// 右侧列表数据
-				rightList: [],
-				// 待渲染列表
-				awaitRenderList:[],
-				// 当前展示页码数据
-				showPage:1
+				// 
+				// list:[]
 			}
 		},
 		mounted() {
 			if(this.$props.status == 'success'){
 				this.startRender();
 			}
+			console.log('执行了')
+			
 		},
 		methods: {
 			// 监听高度变化
@@ -195,14 +167,22 @@
 	}
 </script>
 
+<style>
+	/* 小程序模式下插槽会增加一个 <scoped-slots-default> DOM节点 */
+	.helang-waterfall-slot > scoped-slots-default{
+		width: 100%;
+		display: flex;
+		flex-direction: row;
+		flex-wrap: nowrap;
+		justify-content: flex-start;
+		align-items: flex-start;
+		align-content: flex-start;
+	}
+</style>
 <style lang="scss" scoped>
 	.waterfall-box {
 		padding: 20rpx 10rpx;
 		box-sizing: border-box;
-
-		>view {
-			padding: 0 10rpx;
-		}
 		
 		.list-item{
 			margin-bottom: 0;
@@ -228,11 +208,5 @@
 		justify-content: flex-start;
 		align-items: flex-start;
 		align-content: flex-start;
-
-		&.h-flex-2 {
-			>view {
-				width: 50%;
-			}
-		}
 	}
 </style>
\ No newline at end of file
diff --git "a/uniapp-extend/uni_modules/helang-waterfall/pages/waterfall/waterfall - \345\211\257\346\234\254.vue" "b/uniapp-extend/uni_modules/helang-waterfall/pages/waterfall/waterfall - \345\211\257\346\234\254.vue"
new file mode 100644
index 0000000..6d3acdc
--- /dev/null
+++ "b/uniapp-extend/uni_modules/helang-waterfall/pages/waterfall/waterfall - \345\211\257\346\234\254.vue"	
@@ -0,0 +1,247 @@
+<template>
+	<view>
+		<helang-waterfall-list
+			:status="waterfall.status"
+			:list="waterfall.list"
+			:reset="waterfall.reset"
+			@click="onClick"
+			@done="onDone"
+		>
+			<template>
+				<view v-if="waterfall.status == 'await'">
+					<view class="load-txt">上拉加载更多</view>
+				</view>
+				<view v-else-if="waterfall.status == 'loading'">
+					<view class="load-txt">加载中</view>
+				</view>
+				<view v-else-if="waterfall.status == 'success'">
+					<view class="load-txt">加载中</view>
+				</view>
+				<view v-else-if="waterfall.status == 'finish'">
+					<view class="load-txt">没有更多了</view>
+				</view>
+				<view v-else-if="waterfall.status == 'fail'">
+					<image class="load-icon" src="../../static/waterfall/fail.png"></image>
+					<view class="load-txt">出错了，请刷新重试</view>
+				</view>
+				<view v-else-if="waterfall.status == 'empty'">
+					<image class="load-icon" src="../../static/waterfall/empty.png"></image>
+					<view class="load-txt">暂无数据</view>
+				</view>
+				<view v-else><!-- 别问我为什么要写一个 v-else 的空 view,不写H5平台就会有CSS生效的离谱BUG --></view>
+			</template>
+		</helang-waterfall-list>
+		
+		<view class="status-change" @tap="onStatusChange">
+			<view>切换<br />状态</view>
+		</view>
+	</view>
+</template>
+
+<script>
+	import helangWaterfallList from "@/uni_modules/helang-waterfall/components/waterfall/waterfall-list"
+	
+	// 列表接口模拟数据
+	import mockData from '../../mock-data/waterfall-list.js'
+	
+	export default {
+		components: {
+			"helang-waterfall-list": helangWaterfallList
+		},
+		data() {
+			return {
+				// 异步请求相关
+				ajax: {
+					// 是否可以加载
+					load: true,
+					// 每页的请求条件
+					rows:10,
+					// 页码
+					page:1,
+					// 数据列表
+					dataList:[]
+				},
+				// 瀑布流组件相关
+				waterfall:{
+					status:"",
+					reset:false,
+					list:[]
+				}
+				
+			}
+		},
+		onReady() {
+			this.getList();
+		},
+		// 触底触发
+		onReachBottom() {
+			this.getList();
+		},
+		// 下拉刷新
+		onPullDownRefresh(){
+			// 正常情况下接口返回应该很会很快。故意延迟调用，让用户有在刷新的体验感
+			setTimeout(()=>{
+				this.ajax.page = 1;
+				this.ajax.load = true;
+				this.getList();
+			},800);
+		},
+		methods: {
+			// 瀑布流组件点击事件
+			onClick(data,index, tag){
+				console.log(data);
+				let direction = {
+					"left":'左',
+					"right":'右'
+				}
+				uni.showToast({
+					title:`${direction[tag]}侧列表第${index+1}个被点击`,
+					icon:'none'
+				})
+			},
+			// 瀑布流组件渲染完成
+			onDone(){
+				// 设置组件为 非重置，这行代码保留不删即可
+				this.waterfall.reset = false;
+				
+				// 恢复 getList 方法的调用
+				this.ajax.load = true;
+				this.ajax.page++;
+				
+				// 设置组件状态为 等待加载
+				this.waterfall.status = 'await';
+
+				/**
+				 * 如果你是一个追求完美的开发者，可以通过判断当前数据的长度和请求的数据长度来优化前端请求，减少不必要请求
+				 * 不需要则删除
+				 * */
+				/**
+				if(this.ajax.dataCount >= this.ajax.rows){
+					this.ajax.load = true;
+					this.ajax.page++;
+				}
+				*/
+			},
+			// 获取数据
+			getList() {
+				if (!this.ajax.load) {
+					return;
+				}
+				this.ajax.load = false;
+				
+				// 设置状态为加载中
+				this.waterfall.status = 'loading';
+				
+				// 请求数据， mockData.getList 示例一个 ajax 请求
+				mockData.getList({
+					pageNum:this.ajax.page,
+					pageSize:this.ajax.rows
+				}).then(res=>{
+					// 获取到的数据，请注意数据结构
+					console.log(res);
+					
+					// 第一页数据执行以下代码
+					if(this.ajax.page == 1){
+						// 关闭下拉
+						uni.stopPullDownRefresh();
+						
+						// 设置组件状态为 重置，可供下拉刷新这类需要重置列表功能时使用
+						this.waterfall.reset = true;
+					}
+					
+					// 数据无效时处理
+					if(!res || res.length < 1){
+						// 设置组件为 加载结束 状态
+						this.waterfall.status = 'finish';
+						return;
+					}
+					
+					// 将数据赋值给瀑布流 list 属性
+					this.waterfall.list = res;
+					// 设置组件为 加载成功 状态，此时瀑布流组件开始计算当前数据的布局
+					this.waterfall.status = 'success';
+					
+					/**
+					 * 下方的代码为扩展其他功能的示例代码 可做参考，不需要可删除
+					 * */ 
+					
+					// 缓存当前数据给其他需要该数据的功能使用
+					if(this.ajax.page == 1){
+						this.ajax.dataList = res;
+					}else{
+						this.ajax.dataList = [...this.ajax.dataList,...res];
+					}
+					// 记录本次数据长度，意义请看 done 事件的回调
+					this.ajax.dataCount = res.length || 0;
+					
+					// 。。。下面不需要写代码了，等待组件渲染完成
+				})
+			},
+			// 导航状态切换演示监听
+			onStatusChange(){
+				uni.showActionSheet({
+					itemList: ['常规', '加载异常', '加载错误'],
+					success: (res)=> {
+						switch(res.tapIndex){
+							case 0:
+								this.ajax.page = 1;
+								this.ajax.load = true;
+								this.getList();
+								break;
+							case 1:
+								// alert(111)
+								this.waterfall.status = 'fail';
+								break;
+							case 2:
+								this.waterfall.status = 'empty';
+								break;
+							default:
+						}
+					}
+				});
+			},
+		}
+	}
+</script>
+
+<style lang="scss">
+	page {
+		background-color: #f3f3f3;
+	}
+	
+	.load-txt{
+		padding: 0 0 20rpx 0;
+		text-align: center;
+		color: #999;
+		font-size: 24rpx;
+	}
+	
+	.load-icon{
+		width: 300rpx;
+		height: 300rpx;
+		margin: 0 auto 20rpx auto;
+		display: block;
+	}
+	
+	.status-change{
+		position: fixed;
+		right: 10rpx;
+		top: 60%;
+		width: 80rpx;
+		height: 80rpx;
+		z-index: 100;
+		font-size: 24rpx;
+		border-radius: 50%;
+		background-color: #0089ff;
+		color: #fff;
+		line-height: 1;
+		opacity: .33;
+		
+		display: flex;
+		flex-direction: row;
+		flex-wrap: nowrap;
+		justify-content: center;
+		align-items: center;
+		align-content: center;
+	}
+</style>
\ No newline at end of file
diff --git a/uniapp-extend/uni_modules/helang-waterfall/pages/waterfall/waterfall.vue b/uniapp-extend/uni_modules/helang-waterfall/pages/waterfall/waterfall.vue
index 6d3acdc..034c8ca 100644
--- a/uniapp-extend/uni_modules/helang-waterfall/pages/waterfall/waterfall.vue
+++ b/uniapp-extend/uni_modules/helang-waterfall/pages/waterfall/waterfall.vue
@@ -1,52 +1,36 @@
 <template>
 	<view>
-		<helang-waterfall-list
-			:status="waterfall.status"
-			:list="waterfall.list"
-			:reset="waterfall.reset"
-			@click="onClick"
-			@done="onDone"
-		>
-			<template>
-				<view v-if="waterfall.status == 'await'">
-					<view class="load-txt">上拉加载更多</view>
-				</view>
-				<view v-else-if="waterfall.status == 'loading'">
-					<view class="load-txt">加载中</view>
-				</view>
-				<view v-else-if="waterfall.status == 'success'">
-					<view class="load-txt">加载中</view>
-				</view>
-				<view v-else-if="waterfall.status == 'finish'">
-					<view class="load-txt">没有更多了</view>
-				</view>
-				<view v-else-if="waterfall.status == 'fail'">
-					<image class="load-icon" src="../../static/waterfall/fail.png"></image>
-					<view class="load-txt">出错了，请刷新重试</view>
-				</view>
-				<view v-else-if="waterfall.status == 'empty'">
-					<image class="load-icon" src="../../static/waterfall/empty.png"></image>
-					<view class="load-txt">暂无数据</view>
-				</view>
-				<view v-else><!-- 别问我为什么要写一个 v-else 的空 view,不写H5平台就会有CSS生效的离谱BUG --></view>
+		<waterfall :col="waterfall.col" :list="waterfall.list">
+			<template v-slot:default="{ list, colWidth }">
+				<waterfall-col 
+					v-for="(item,index) in list" 
+					:key="index" 
+					:colWidth="colWidth"
+				>
+					<template>
+						<waterfall-item @height="onHeight" v-for="(item2,index2) in item" :key="index2">
+							<button>{{item2}}</button>
+						</waterfall-item>
+					</template>
+				</waterfall-col>
 			</template>
-		</helang-waterfall-list>
-		
-		<view class="status-change" @tap="onStatusChange">
-			<view>切换<br />状态</view>
-		</view>
+		</waterfall>
 	</view>
 </template>
 
 <script>
-	import helangWaterfallList from "@/uni_modules/helang-waterfall/components/waterfall/waterfall-list"
+	import Waterfall from "@/uni_modules/helang-waterfall/components/waterfall/waterfall-list";
+	import WaterfallCol from "@/uni_modules/helang-waterfall/components/waterfall/waterfall-col"
+	import WaterfallItem from "@/uni_modules/helang-waterfall/components/waterfall/waterfall-item"
 	
 	// 列表接口模拟数据
 	import mockData from '../../mock-data/waterfall-list.js'
 	
 	export default {
 		components: {
-			"helang-waterfall-list": helangWaterfallList
+			"waterfall": Waterfall,
+			"waterfall-col": WaterfallCol,
+			"waterfall-item": WaterfallItem
 		},
 		data() {
 			return {
@@ -63,15 +47,19 @@
 				},
 				// 瀑布流组件相关
 				waterfall:{
+					col:2,
 					status:"",
 					reset:false,
-					list:[]
+					list:[
+						[1,2,3],
+						['a','b','c']
+					]
 				}
 				
 			}
 		},
 		onReady() {
-			this.getList();
+			// this.getList();
 		},
 		// 触底触发
 		onReachBottom() {
@@ -87,6 +75,9 @@
 			},800);
 		},
 		methods: {
+			onHeight(e){
+				console.log(e)
+			},
 			// 瀑布流组件点击事件
 			onClick(data,index, tag){
 				console.log(data);
-- 
Gitee


From b691b9b5704082729c7fdb8725792b04b98e6406 Mon Sep 17 00:00:00 2001
From: helang <helang.love@qq.com>
Date: Sat, 5 Oct 2024 00:59:09 +0800
Subject: [PATCH 2/4] =?UTF-8?q?feat:=20=E5=AE=8C=E5=96=84=E9=AB=98?=
 =?UTF-8?q?=E5=BA=A6=E9=97=AE=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/waterfall/waterfall-col.vue    |   1 +
 .../components/waterfall/waterfall-list.vue   | 169 +++++++++++++-----
 .../mock-data/waterfall-list.js               |   3 +-
 .../pages/waterfall/waterfall.vue             |  29 +--
 4 files changed, 143 insertions(+), 59 deletions(-)

diff --git a/uniapp-extend/uni_modules/helang-waterfall/components/waterfall/waterfall-col.vue b/uniapp-extend/uni_modules/helang-waterfall/components/waterfall/waterfall-col.vue
index 6e28ae6..bfce4e1 100644
--- a/uniapp-extend/uni_modules/helang-waterfall/components/waterfall/waterfall-col.vue
+++ b/uniapp-extend/uni_modules/helang-waterfall/components/waterfall/waterfall-col.vue
@@ -56,5 +56,6 @@
 <style lang="scss" scoped>
 	.waterfall-col{
 		padding:0 10rpx;
+		box-sizing: border-box;
 	}
 </style>
\ No newline at end of file
diff --git a/uniapp-extend/uni_modules/helang-waterfall/components/waterfall/waterfall-list.vue b/uniapp-extend/uni_modules/helang-waterfall/components/waterfall/waterfall-list.vue
index 7f903d8..71288b8 100644
--- a/uniapp-extend/uni_modules/helang-waterfall/components/waterfall/waterfall-list.vue
+++ b/uniapp-extend/uni_modules/helang-waterfall/components/waterfall/waterfall-list.vue
@@ -2,13 +2,34 @@
 	<view>
 		<view class="waterfall-box">
 			<view class="h-flex-x helang-waterfall-slot">
-				<slot name="default" v-bind:colWidth="colWidth" v-bind:list="list"></slot>
+				<slot name="default" v-bind:colWidth="colWidth" v-bind:list="renderList"></slot>
 			</view>
 		</view>
+		<slot name="tips"></slot>
+		<image 
+			class="load-image" 
+			v-for="(item,index) in waitRenderList" 
+			:src="item.__waterfall_imageUrl" 
+			:key="index" 
+			:data-index="index"
+			@load="handleImageLoad" 
+			@error="handleImageLoad"
+		></image>
 	</view>
 </template>
 
 <script>
+	// 图片高度键名
+	const IMAGE_HEIGHT_KEY = '__waterfall_imageHeight';
+	// 图片缓存键名
+	const IMAGE_CACHE_KEY = '__waterfall_cacheImageHeight';
+	// 图片链接键名
+	let IMAGE_URL_KEY = '';
+	// 图片加载键名
+	const IMAGE_LOAD_KEY = '__waterfall_imageUrl';
+	// 是否渲染
+	const ITEM_SHOW_KEY = '__waterfall_show';
+	
 	export default {
 		name:"helangWaterfallList",
 		options:{
@@ -18,38 +39,38 @@
 			
 		},
 		props:{
+			// 组件状态
+			status:{
+				type: String,
+				default:''
+			},
 			// 分栏
 			col:{
 				type: Number,
 				default:2
 			},
-			// 组件状态
-			status:{
-				type: String,
-				default:''
+			// 图片宽度
+			imageWidth:{
+				type: Number,
+				default:305
 			},
-			// 待渲染的数据
-			list:{
-				type: Array,
-				default(){
-					return [];
-				}
+			// 内容相同高度
+			sameHeight:{
+				type: Boolean,
+				default:true
 			},
-			// 重置列表，设置为 true 时，瀑布流会自动重新渲染列表
-			reset:{
+			// 缓存高度(加速渲染)
+			cacheImageHeight:{
 				type: Boolean,
-				default:false
+				default:true
 			},
+			imagekey:{
+				type: String,
+				default:'url'
+			}
 		},
 		watch:{
-			"$props.status"(newValue,oldValue){
-				// 状态变更为 加载成功 时，执行瀑布流数据渲染	
-				if(newValue == 'success'){
-					this.startRender();
-				}else if(!this.showList){
-					this.resetData();
-				}
-			}
+			
 		},
 		computed:{
 			colWidth(){
@@ -58,24 +79,59 @@
 		},
 		data() {
 			return {
-				// 左侧列表高度
-				leftHeight: 0,
-				// 右侧列表高度
-				rightHeight: 0,
-				// 
-				// list:[]
+				// 待渲染列表
+				waitRenderList:[],
+				// 渲染列表
+				renderList:[],
+				// 渲染列表高度
+				renderListHeight:[]
 			}
 		},
-		mounted() {
-			if(this.$props.status == 'success'){
-				this.startRender();
+		created() {
+			this.initRenderList();
+			// 图片高度缓存
+			if(!uni[IMAGE_CACHE_KEY]){
+				uni[IMAGE_CACHE_KEY] = {};
 			}
-			console.log('执行了')
+			IMAGE_URL_KEY = this.$props.imagekey;
+		},
+		mounted() {
 			
 		},
 		methods: {
+			// 初始化渲染列表
+			initRenderList(){
+				let list = [];
+				let heights = [];
+				for(let i = 0; i < this.$props.col; i++){
+					list.push([]);
+					heights.push(0);
+				}
+				this.renderList = list;
+				this.renderListHeight = heights;
+			},
+			// 处理图片加载
+			handleImageLoad(e){
+				const { height = 0 } = e.detail;
+				const { index } = e.currentTarget.dataset;
+				
+				this.addWaitRenderListImageHeight(index, height);
+				console.log(e)
+				
+				if(this.$props.cacheImageHeight){
+					const imageUrl = this.waitRenderList[index][IMAGE_URL_KEY];
+					if(imageUrl.length < 300){
+						uni[IMAGE_CACHE_KEY][imageUrl] = height;
+					}
+				}
+			},
+			// 待渲染列表添加图片高度数据
+			addWaitRenderListImageHeight(index,height){
+				this.waitRenderList[index][IMAGE_HEIGHT_KEY] = height;
+				
+			},
 			// 监听高度变化
-			onHeight(height, tag) {
+			handleHeightChange(index, height) {
 				/**
 				 * 这个为实际渲染后 CSS 中 margin-buttom 的值，本示例默认为20rpx
 				 * 用于解决实际渲染后因为数据条数关系，高度差计算偏差的问题
@@ -89,19 +145,10 @@
 				} else {
 					this.rightHeight += (height + marginBottom);
 				}
-				this.renderList();
-			},
-			// 组件点击事件
-			onClick(index, tag){
-				// 对应的数据
-				if(tag == 'left'){
-					this.$emit("click",this.leftList[index],index,tag);
-				}else{
-					this.$emit("click",this.rightList[index],index,tag);
-				}
+				this.renderListFn();
 			},
 			// 渲染列表，这里实现瀑布流的左右分栏
-			renderList() {
+			renderListFn() {
 				// 待渲染长度为 0 时表示已渲染完成
 				if(this.awaitRenderList.length < 1){
 					this.showPage++;
@@ -144,7 +191,31 @@
 				this.showPage = 1;
 			},
 			// 启动渲染
-			startRender(){
+			render(list = [],reset = false){
+				if(!list?.length > 0){
+					console.log('河浪瀑布流插件提示：当前数据为空，不会触发列表渲染');
+					return;
+				}
+				
+				this.waitRenderList = list.map((item)=>{
+					const imageUrl = item[IMAGE_URL_KEY];
+					const imageHeight = uni[IMAGE_CACHE_KEY][imageUrl];
+					const show = this.$props.sameHeight ? true:false;
+					
+					return {
+						...item,
+						[IMAGE_LOAD_KEY]: imageUrl,
+						[IMAGE_HEIGHT_KEY]: imageHeight,
+						[ITEM_SHOW_KEY]: show
+					}
+					
+				});
+				console.log(this.waitRenderList, reset);
+				return;
+				this.$props.list.forEach((item)=>{
+					console.log(item)
+					this.renderList[0].push(item)
+				})
 				if(!this.showList){
 					this.resetData();
 					return;
@@ -173,7 +244,7 @@
 		width: 100%;
 		display: flex;
 		flex-direction: row;
-		flex-wrap: nowrap;
+		flex-wrap: wrap;
 		justify-content: flex-start;
 		align-items: flex-start;
 		align-content: flex-start;
@@ -204,9 +275,13 @@
 	.h-flex-x {
 		display: flex;
 		flex-direction: row;
-		flex-wrap: nowrap;
+		flex-wrap: wrap;
 		justify-content: flex-start;
 		align-items: flex-start;
 		align-content: flex-start;
 	}
+	
+	.load-image{
+		display: none !important;
+	}
 </style>
\ No newline at end of file
diff --git a/uniapp-extend/uni_modules/helang-waterfall/mock-data/waterfall-list.js b/uniapp-extend/uni_modules/helang-waterfall/mock-data/waterfall-list.js
index c5acc02..81be4e7 100644
--- a/uniapp-extend/uni_modules/helang-waterfall/mock-data/waterfall-list.js
+++ b/uniapp-extend/uni_modules/helang-waterfall/mock-data/waterfall-list.js
@@ -19,10 +19,11 @@ let list = ()=>{
 			];
 		
 			let res = [];
+			let t = `?t=${new Date().getTime()}`;
 			for (let i = 0; i < 10; i++) {
 				res.push({
 					id:i+1,
-					url:`/uni_modules/helang-waterfall/static/waterfall/${random(0,3)}.jpg?t=${new Date().getTime()}`,
+					url:`/uni_modules/helang-waterfall/static/waterfall/${random(0,3)}.jpg`,
 					title: titles[random(0, titles.length)],
 					money: random(9, 9999),
 					label:'官方自营',
diff --git a/uniapp-extend/uni_modules/helang-waterfall/pages/waterfall/waterfall.vue b/uniapp-extend/uni_modules/helang-waterfall/pages/waterfall/waterfall.vue
index 034c8ca..dbfa2ee 100644
--- a/uniapp-extend/uni_modules/helang-waterfall/pages/waterfall/waterfall.vue
+++ b/uniapp-extend/uni_modules/helang-waterfall/pages/waterfall/waterfall.vue
@@ -1,6 +1,12 @@
 <template>
 	<view>
-		<waterfall :col="waterfall.col" :list="waterfall.list">
+		<waterfall 
+			ref="helangWaterfall" 
+			:col="waterfall.col" 
+			:status="waterfall.status"
+			:imageWidth="300"
+			:cacheImageHeight="false"
+		>
 			<template v-slot:default="{ list, colWidth }">
 				<waterfall-col 
 					v-for="(item,index) in list" 
@@ -9,11 +15,14 @@
 				>
 					<template>
 						<waterfall-item @height="onHeight" v-for="(item2,index2) in item" :key="index2">
-							<button>{{item2}}</button>
+							<image :src="item2.url" style="width: 100%;"></image>
 						</waterfall-item>
 					</template>
 				</waterfall-col>
 			</template>
+			<template #tips>
+				<button>加载中</button>
+			</template>
 		</waterfall>
 	</view>
 </template>
@@ -48,18 +57,13 @@
 				// 瀑布流组件相关
 				waterfall:{
 					col:2,
-					status:"",
-					reset:false,
-					list:[
-						[1,2,3],
-						['a','b','c']
-					]
+					status:""
 				}
 				
 			}
 		},
 		onReady() {
-			// this.getList();
+			this.getList();
 		},
 		// 触底触发
 		onReachBottom() {
@@ -76,7 +80,7 @@
 		},
 		methods: {
 			onHeight(e){
-				console.log(e)
+				// console.log(e)
 			},
 			// 瀑布流组件点击事件
 			onClick(data,index, tag){
@@ -147,8 +151,11 @@
 						return;
 					}
 					
+					this.$refs.helangWaterfall.render([...res,{url:'233434'}]);
+					return;
+					
 					// 将数据赋值给瀑布流 list 属性
-					this.waterfall.list = res;
+					// this.waterfall.list = [...res,{url:'233434'}];
 					// 设置组件为 加载成功 状态，此时瀑布流组件开始计算当前数据的布局
 					this.waterfall.status = 'success';
 					
-- 
Gitee


From db3794a28ae084b9f62683269918fdea8e7ad8ca Mon Sep 17 00:00:00 2001
From: helang <helang.love@qq.com>
Date: Sun, 6 Oct 2024 22:55:00 +0800
Subject: [PATCH 3/4] =?UTF-8?q?feat:=20=E5=85=A8=E9=87=8F=E6=B7=BB?=
 =?UTF-8?q?=E5=8A=A0=E5=87=BD=E6=95=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../helang-tabBar/tab-bar-bubble.vue          |   6 +-
 .../helang-tabBar/tab-bar-bulge.vue           |  14 +-
 .../helang-tabBar/tab-bar-curtain.vue         |   8 +-
 .../helang-tabBar/tab-bar-overturn.vue        |   8 +-
 .../components/helang-tabBar/tab-bar-roll.vue |   6 +-
 .../helang-tabBar/tab-bar-slide.vue           |   6 +-
 .../{uni-icons => tab-uni-icons}/icons.js     |   0
 .../tab-uni-icons.vue}                        |   0
 .../{uni-icons => tab-uni-icons}/uniicons.css |   0
 .../{uni-icons => tab-uni-icons}/uniicons.ttf | Bin
 .../helang-waterfall/components/content_1.vue |  94 +++++++
 .../components/waterfall/waterfall-col.vue    |  13 +-
 .../components/waterfall/waterfall-item.vue   |   6 +-
 ...rfall-list - \345\211\257\346\234\254.vue" | 238 -----------------
 .../components/waterfall/waterfall-list.vue   | 212 ++++++++-------
 .../mock-data/waterfall-list.js               |   4 +-
 .../waterfall - \345\211\257\346\234\254.vue" | 247 ------------------
 .../pages/waterfall/waterfall.vue             | 105 ++------
 18 files changed, 268 insertions(+), 699 deletions(-)
 rename uniapp-extend/uni_modules/helang-tabBar/components/{uni-icons => tab-uni-icons}/icons.js (100%)
 rename uniapp-extend/uni_modules/helang-tabBar/components/{uni-icons/uni-icons.vue => tab-uni-icons/tab-uni-icons.vue} (100%)
 rename uniapp-extend/uni_modules/helang-tabBar/components/{uni-icons => tab-uni-icons}/uniicons.css (100%)
 rename uniapp-extend/uni_modules/helang-tabBar/components/{uni-icons => tab-uni-icons}/uniicons.ttf (100%)
 create mode 100644 uniapp-extend/uni_modules/helang-waterfall/components/content_1.vue
 delete mode 100644 "uniapp-extend/uni_modules/helang-waterfall/components/waterfall/waterfall-list - \345\211\257\346\234\254.vue"
 delete mode 100644 "uniapp-extend/uni_modules/helang-waterfall/pages/waterfall/waterfall - \345\211\257\346\234\254.vue"

diff --git a/uniapp-extend/uni_modules/helang-tabBar/components/helang-tabBar/tab-bar-bubble.vue b/uniapp-extend/uni_modules/helang-tabBar/components/helang-tabBar/tab-bar-bubble.vue
index 64cf94a..209a61a 100644
--- a/uniapp-extend/uni_modules/helang-tabBar/components/helang-tabBar/tab-bar-bubble.vue
+++ b/uniapp-extend/uni_modules/helang-tabBar/components/helang-tabBar/tab-bar-bubble.vue
@@ -16,7 +16,7 @@
 					<view>
 						<view class="h-flex-x h-flex-center">
 							<view class="icon">
-								<uni-icons :type="item.icon" size="48rpx" color="#6b6b68"></uni-icons>
+								<bar-icons :type="item.icon" size="48rpx" color="#6b6b68"></bar-icons>
 							</view>
 						</view>
 						<view class="h-flex-x h-flex-center">
@@ -31,13 +31,13 @@
 </template>
 
 <script>
-	import uniIcons from "@/uni_modules/helang-tabBar/components/uni-icons/uni-icons";
+	import barIcons from "@/uni_modules/helang-tabBar/components/tab-uni-icons/tab-uni-icons";
 	
 	export default {
 		// 冒泡
 		name:"helangTabBarBubble",
 		components: {
-			uniIcons
+			barIcons
 		},
 		props:{
 			// 固定底部
diff --git a/uniapp-extend/uni_modules/helang-tabBar/components/helang-tabBar/tab-bar-bulge.vue b/uniapp-extend/uni_modules/helang-tabBar/components/helang-tabBar/tab-bar-bulge.vue
index a718f85..333fe8b 100644
--- a/uniapp-extend/uni_modules/helang-tabBar/components/helang-tabBar/tab-bar-bulge.vue
+++ b/uniapp-extend/uni_modules/helang-tabBar/components/helang-tabBar/tab-bar-bulge.vue
@@ -17,7 +17,7 @@
 					>
 						<view class="btn h-flex-x h-flex-center" @tap="changeBulge()">
 							<view>
-								<uni-icons type="plusempty" size="42rpx" color="#fff"></uni-icons>
+								<bar-icons type="plusempty" size="42rpx" color="#fff"></bar-icons>
 							</view>
 						</view>
 						<view class="rudder">
@@ -27,13 +27,13 @@
 								<view class="content">
 									<view class="h-flex-x h-flex-3">
 										<view style="padding-top: 40rpx;">
-											<uni-icons type="star" size="42rpx" color="#c66219"></uni-icons>
+											<bar-icons type="star" size="42rpx" color="#c66219"></bar-icons>
 										</view>
 										<view style="padding-bottom: 30rpx;">
-											<uni-icons type="paperplane" size="42rpx" color="#c66219"></uni-icons>
+											<bar-icons type="paperplane" size="42rpx" color="#c66219"></bar-icons>
 										</view>
 										<view style="padding-top: 40rpx;">
-											<uni-icons type="heart" size="42rpx" color="#c66219"></uni-icons>
+											<bar-icons type="heart" size="42rpx" color="#c66219"></bar-icons>
 										</view>
 									</view>
 								</view>
@@ -45,7 +45,7 @@
 					}">
 						<view class="h-flex-x h-flex-center">
 							<view class="icon">
-								<uni-icons :type="item.icon" size="48rpx" color="#b4b3b8"></uni-icons>
+								<bar-icons :type="item.icon" size="48rpx" color="#b4b3b8"></bar-icons>
 							</view>
 						</view>
 						<view class="h-flex-x h-flex-center">
@@ -60,13 +60,13 @@
 </template>
 
 <script>
-	import uniIcons from "@/uni_modules/helang-tabBar/components/uni-icons/uni-icons";
+	import barIcons from "@/uni_modules/helang-tabBar/components/tab-uni-icons/tab-uni-icons";
 	
 	export default {
 		// 凸起舵式切换
 		name:"helangTabBarOverturn",
 		components: {
-			uniIcons
+			barIcons
 		},
 		props:{
 			// 固定底部
diff --git a/uniapp-extend/uni_modules/helang-tabBar/components/helang-tabBar/tab-bar-curtain.vue b/uniapp-extend/uni_modules/helang-tabBar/components/helang-tabBar/tab-bar-curtain.vue
index 992ff60..2edf603 100644
--- a/uniapp-extend/uni_modules/helang-tabBar/components/helang-tabBar/tab-bar-curtain.vue
+++ b/uniapp-extend/uni_modules/helang-tabBar/components/helang-tabBar/tab-bar-curtain.vue
@@ -15,7 +15,7 @@
 					<view>
 						<view class="h-flex-x h-flex-center">
 							<view class="icon">
-								<uni-icons :type="item.icon" size="48rpx" color="#b4b3b8"></uni-icons>
+								<bar-icons :type="item.icon" size="48rpx" color="#b4b3b8"></bar-icons>
 							</view>
 						</view>
 						<view class="h-flex-x h-flex-center">
@@ -30,13 +30,13 @@
 </template>
 
 <script>
-	import uniIcons from "@/uni_modules/helang-tabBar/components/uni-icons/uni-icons";
+	import barIcons from "@/uni_modules/helang-tabBar/components/tab-uni-icons/tab-uni-icons";
 	
 	export default {
 		// 凸起舵式切换
 		name:"helangTabBarOverturn",
 		components: {
-			uniIcons
+			barIcons
 		},
 		props:{
 			// 固定底部
@@ -130,7 +130,7 @@
 		&.active{
 			color: #313151;
 			
-			/deep/ .uni-icons{
+			/deep/ .bar-icons{
 				color: #313151 !important;
 			}
 			
diff --git a/uniapp-extend/uni_modules/helang-tabBar/components/helang-tabBar/tab-bar-overturn.vue b/uniapp-extend/uni_modules/helang-tabBar/components/helang-tabBar/tab-bar-overturn.vue
index 42de423..a5ebafc 100644
--- a/uniapp-extend/uni_modules/helang-tabBar/components/helang-tabBar/tab-bar-overturn.vue
+++ b/uniapp-extend/uni_modules/helang-tabBar/components/helang-tabBar/tab-bar-overturn.vue
@@ -16,10 +16,10 @@
 							<view class="icon">
 								<view>
 									<view class="icon-default h-flex-x h-flex-center">
-										<uni-icons :type="item.icon" size="52rpx" color="#bebcbc"></uni-icons>
+										<bar-icons :type="item.icon" size="52rpx" color="#bebcbc"></bar-icons>
 									</view>
 									<view class="icon-selected h-flex-x h-flex-center">
-										<uni-icons :type="item.iconSelected" size="60rpx" color="#262626"></uni-icons>
+										<bar-icons :type="item.iconSelected" size="60rpx" color="#262626"></bar-icons>
 									</view>
 								</view>
 							</view>
@@ -36,13 +36,13 @@
 </template>
 
 <script>
-	import uniIcons from "@/uni_modules/helang-tabBar/components/uni-icons/uni-icons";
+	import barIcons from "@/uni_modules/helang-tabBar/components/tab-uni-icons/tab-uni-icons";
 	
 	export default {
 		// 翻转
 		name:"helangTabBarOverturn",
 		components: {
-			uniIcons
+			barIcons
 		},
 		props:{
 			// 固定底部
diff --git a/uniapp-extend/uni_modules/helang-tabBar/components/helang-tabBar/tab-bar-roll.vue b/uniapp-extend/uni_modules/helang-tabBar/components/helang-tabBar/tab-bar-roll.vue
index d279f93..b0613e9 100644
--- a/uniapp-extend/uni_modules/helang-tabBar/components/helang-tabBar/tab-bar-roll.vue
+++ b/uniapp-extend/uni_modules/helang-tabBar/components/helang-tabBar/tab-bar-roll.vue
@@ -13,7 +13,7 @@
 			>
 				<view>
 					<view class="h-flex-x h-flex-center">
-						<uni-icons :type="item.icon" size="60rpx" color="#dbd9f7"></uni-icons>
+						<bar-icons :type="item.icon" size="60rpx" color="#dbd9f7"></bar-icons>
 					</view>
 					<view class="h-flex-x h-flex-center">
 						{{item.text}}
@@ -25,13 +25,13 @@
 </template>
 
 <script>
-	import uniIcons from "@/uni_modules/helang-tabBar/components/uni-icons/uni-icons";
+	import barIcons from "@/uni_modules/helang-tabBar/components/tab-uni-icons/tab-uni-icons";
 	
 	export default {
 		// 翻滚
 		name:"helangTabBarRoll",
 		components: {
-			uniIcons
+			barIcons
 		},
 		props:{
 			// 固定底部
diff --git a/uniapp-extend/uni_modules/helang-tabBar/components/helang-tabBar/tab-bar-slide.vue b/uniapp-extend/uni_modules/helang-tabBar/components/helang-tabBar/tab-bar-slide.vue
index 4f9e0f8..1ff0e41 100644
--- a/uniapp-extend/uni_modules/helang-tabBar/components/helang-tabBar/tab-bar-slide.vue
+++ b/uniapp-extend/uni_modules/helang-tabBar/components/helang-tabBar/tab-bar-slide.vue
@@ -18,7 +18,7 @@
 					<view>
 						<view class="h-flex-x h-flex-center">
 							<view class="icon h-flex-x h-flex-center">
-								<uni-icons :type="item.icon" size="48rpx" color="#262626"></uni-icons>
+								<bar-icons :type="item.icon" size="48rpx" color="#262626"></bar-icons>
 							</view>
 						</view>
 						<view class="h-flex-x h-flex-center text">
@@ -33,13 +33,13 @@
 </template>
 
 <script>
-	import uniIcons from "@/uni_modules/helang-tabBar/components/uni-icons/uni-icons";
+	import barIcons from "@/uni_modules/helang-tabBar/components/tab-uni-icons/tab-uni-icons";
 	
 	export default {
 		// 滑动
 		name:"helangTabBarSlide",
 		components: {
-			uniIcons
+			barIcons
 		},
 		props:{
 			// 固定底部
diff --git a/uniapp-extend/uni_modules/helang-tabBar/components/uni-icons/icons.js b/uniapp-extend/uni_modules/helang-tabBar/components/tab-uni-icons/icons.js
similarity index 100%
rename from uniapp-extend/uni_modules/helang-tabBar/components/uni-icons/icons.js
rename to uniapp-extend/uni_modules/helang-tabBar/components/tab-uni-icons/icons.js
diff --git a/uniapp-extend/uni_modules/helang-tabBar/components/uni-icons/uni-icons.vue b/uniapp-extend/uni_modules/helang-tabBar/components/tab-uni-icons/tab-uni-icons.vue
similarity index 100%
rename from uniapp-extend/uni_modules/helang-tabBar/components/uni-icons/uni-icons.vue
rename to uniapp-extend/uni_modules/helang-tabBar/components/tab-uni-icons/tab-uni-icons.vue
diff --git a/uniapp-extend/uni_modules/helang-tabBar/components/uni-icons/uniicons.css b/uniapp-extend/uni_modules/helang-tabBar/components/tab-uni-icons/uniicons.css
similarity index 100%
rename from uniapp-extend/uni_modules/helang-tabBar/components/uni-icons/uniicons.css
rename to uniapp-extend/uni_modules/helang-tabBar/components/tab-uni-icons/uniicons.css
diff --git a/uniapp-extend/uni_modules/helang-tabBar/components/uni-icons/uniicons.ttf b/uniapp-extend/uni_modules/helang-tabBar/components/tab-uni-icons/uniicons.ttf
similarity index 100%
rename from uniapp-extend/uni_modules/helang-tabBar/components/uni-icons/uniicons.ttf
rename to uniapp-extend/uni_modules/helang-tabBar/components/tab-uni-icons/uniicons.ttf
diff --git a/uniapp-extend/uni_modules/helang-waterfall/components/content_1.vue b/uniapp-extend/uni_modules/helang-waterfall/components/content_1.vue
new file mode 100644
index 0000000..a24cdac
--- /dev/null
+++ b/uniapp-extend/uni_modules/helang-waterfall/components/content_1.vue
@@ -0,0 +1,94 @@
+<template>
+	<view class="content" @click="handleClick">
+		<image class="image" mode="aspectFill" :src="renderData.url" :style="{height:renderData.__waterfall_imageHeight}"></image>
+		<view class="shop ellipsis-1">{{renderData.shop}}</view>
+		<view class="label ellipsis-1">{{renderData.label}}</view>
+		<view class="money ellipsis-1">{{renderData.money}}</view>
+	</view>
+</template>
+
+<script>
+	
+	export default {
+		props:{
+			// 分栏索引
+			colIndex:{
+				type: Number,
+				default:0
+			},
+			// 当前栏的数据索引
+			itemIndex:{
+				type: Number,
+				default:0
+			},
+			renderData:{
+				type: Object,
+				default:()=>{
+					return {};
+				}
+			}
+		},
+		components: {
+			
+		},
+		data() {
+			return {
+				
+			}
+		},
+		
+		methods: {
+			// 瀑布流组件点击事件
+			handleClick(){
+				console.log(this.$props.renderData);
+				uni.showToast({
+					title:`第${this.$props.colIndex+1}栏的${this.$props.itemIndex+1}个被点击`,
+					icon:'none'
+				});
+			}
+		}
+	}
+</script>
+
+<style lang="scss">
+	.content{
+		padding: 20rpx;
+		background-color: white;
+		border-radius: 4px;
+		line-height: 1.3;
+		
+		.image{
+			display: block;
+			width: 100%;
+			height: auto;
+		}
+		
+		.ellipsis-1{
+			white-space:nowrap;        // 强制一行显示
+			overflow:hidden;          // 超出隐藏
+			text-overflow:ellipsis;   // 省略号
+		}
+		
+		.shop{
+			font-size: 32rpx;
+			color:#666;
+			margin: 20rpx 0;
+		}
+		
+		.label{
+			padding: 10rpx 20rpx;
+			border-radius: 100px;
+			background-color: #F00;
+			color: white;
+			font-size: 24rpx;
+			display: inline-block;
+			line-height: 1;
+		}
+		
+		.money{
+			font-size: 28rpx;
+			color:#F00;
+			margin-top: 10rpx;
+		}
+	}
+</style>
\ No newline at end of file
diff --git a/uniapp-extend/uni_modules/helang-waterfall/components/waterfall/waterfall-col.vue b/uniapp-extend/uni_modules/helang-waterfall/components/waterfall/waterfall-col.vue
index bfce4e1..59e9fa6 100644
--- a/uniapp-extend/uni_modules/helang-waterfall/components/waterfall/waterfall-col.vue
+++ b/uniapp-extend/uni_modules/helang-waterfall/components/waterfall/waterfall-col.vue
@@ -30,18 +30,7 @@
 		},
 		data() {
 			return {
-				// 左侧列表高度
-				leftHeight: 0,
-				// 右侧列表高度
-				rightHeight: 0,
-				// 左侧列表数据
-				leftList: [],
-				// 右侧列表数据
-				rightList: [],
-				// 待渲染列表
-				awaitRenderList:[],
-				// 当前展示页码数据
-				showPage:1
+				
 			}
 		},
 		mounted() {
diff --git a/uniapp-extend/uni_modules/helang-waterfall/components/waterfall/waterfall-item.vue b/uniapp-extend/uni_modules/helang-waterfall/components/waterfall/waterfall-item.vue
index eb7183c..8009f7e 100644
--- a/uniapp-extend/uni_modules/helang-waterfall/components/waterfall/waterfall-item.vue
+++ b/uniapp-extend/uni_modules/helang-waterfall/components/waterfall/waterfall-item.vue
@@ -38,7 +38,11 @@
 		methods:{
 			async postHeight(){
 				await wait(100);
-				this.$emit("height",'321312');
+				const query = uni.createSelectorQuery().in(this);
+				query.select('.waterfall-item').boundingClientRect(data => {
+					let height = Math.floor(data.height);
+					this.$emit("height",height);
+				}).exec();
 			}
 		}
 	}
diff --git "a/uniapp-extend/uni_modules/helang-waterfall/components/waterfall/waterfall-list - \345\211\257\346\234\254.vue" "b/uniapp-extend/uni_modules/helang-waterfall/components/waterfall/waterfall-list - \345\211\257\346\234\254.vue"
deleted file mode 100644
index 688c961..0000000
--- "a/uniapp-extend/uni_modules/helang-waterfall/components/waterfall/waterfall-list - \345\211\257\346\234\254.vue"	
+++ /dev/null
@@ -1,238 +0,0 @@
-<template>
-	<view>
-		<view class="waterfall-box h-flex-x h-flex-2" v-if="showList">
-			<view>
-				<view v-for="(item,index) in leftList" :key="item._render_id" 
-					class="list-item" 
-					:class="{'show': showPage > item._current_page }"
-				>
-					<helang-waterfall-item
-						:params="item" 
-						tag="left"
-						:index="index"
-						@height="onHeight"
-						@click="onClick"
-					></helang-waterfall-item>
-				</view>
-			</view>
-			<view>
-				<view v-for="(item,index) in rightList" :key="item._render_id" 
-					class="list-item"
-					:class="{'show': showPage > item._current_page }"
-				>
-					<helang-waterfall-item
-						:params="item" 
-						@height="onHeight"
-						@click="onClick"
-						tag="right"
-						:index="index"
-					></helang-waterfall-item>
-				</view>
-			</view>
-		</view>
-		
-		<slot name="default"></slot>
-	</view>
-</template>
-
-<script>
-	import helangWaterfallItem from "./waterfall-item.vue"
-		
-	export default {
-		name:"helangWaterfallList",
-		options:{
-			virtualHost: true
-		},
-		components: {
-			"helang-waterfall-item": helangWaterfallItem
-		},
-		props:{
-			// 组件状态
-			status:{
-				type: String,
-				default:''
-			},
-			// 待渲染的数据
-			list:{
-				type: Array,
-				default(){
-					return [];
-				}
-			},
-			// 重置列表，设置为 true 时，瀑布流会自动重新渲染列表
-			reset:{
-				type: Boolean,
-				default:false
-			},
-		},
-		watch:{
-			"$props.status"(newValue,oldValue){
-				// 状态变更为 加载成功 时，执行瀑布流数据渲染	
-				if(newValue == 'success'){
-					this.startRender();
-				}else if(!this.showList){
-					this.resetData();
-				}
-			}
-		},
-		computed:{
-			showList(){
-				return !["fail","empty"].includes(this.$props.status);
-			}
-		},
-		data() {
-			return {
-				// 左侧列表高度
-				leftHeight: 0,
-				// 右侧列表高度
-				rightHeight: 0,
-				// 左侧列表数据
-				leftList: [],
-				// 右侧列表数据
-				rightList: [],
-				// 待渲染列表
-				awaitRenderList:[],
-				// 当前展示页码数据
-				showPage:1
-			}
-		},
-		mounted() {
-			if(this.$props.status == 'success'){
-				this.startRender();
-			}
-		},
-		methods: {
-			// 监听高度变化
-			onHeight(height, tag) {
-				/**
-				 * 这个为实际渲染后 CSS 中 margin-buttom 的值，本示例默认为20rpx
-				 * 用于解决实际渲染后因为数据条数关系，高度差计算偏差的问题
-				 * */
-				let marginBottom = uni.upx2px(20);
-				
-				// console.log(`左高：${this.leftHeight},右高：${this.rightHeight},当前高：${height},插入方向：${tag}`)
-				
-				if (tag == 'left') {
-					this.leftHeight += (height + marginBottom);
-				} else {
-					this.rightHeight += (height + marginBottom);
-				}
-				this.renderList();
-			},
-			// 组件点击事件
-			onClick(index, tag){
-				// 对应的数据
-				if(tag == 'left'){
-					this.$emit("click",this.leftList[index],index,tag);
-				}else{
-					this.$emit("click",this.rightList[index],index,tag);
-				}
-			},
-			// 渲染列表，这里实现瀑布流的左右分栏
-			renderList() {
-				// 待渲染长度为 0 时表示已渲染完成
-				if(this.awaitRenderList.length < 1){
-					this.showPage++;
-					this.$emit("done");
-					
-					// 为防止 js 数值类型最大值溢出，当高度值大于 1亿时重置高度
-					if(this.leftHeight > 100000000){
-						if(this.leftHeight > this.rightHeight){
-							this.leftHeight = 2;
-							this.rightHeight = 1;
-						}else{
-							this.leftHeight = 1;
-							this.rightHeight = 2;
-						}
-					}
-					return;
-				}
-				let item = {
-					...this.awaitRenderList.splice(0,1)[0],
-					// 当前数据添加当前页面标识
-					_current_page:this.showPage,
-					// 当前数据添加一个渲染id，解决 v-for 重复会出现不执行 load 的 BUG
-					_render_id:new Date().getTime()
-				};
-				
-				if(this.leftHeight > this.rightHeight){
-					this.rightList.push(item);
-				}else{
-					this.leftList.push(item);
-				}
-			},
-			// 重置数据
-			resetData(){
-				this.leftHeight = 0;
-				this.rightHeight = 0;
-				this.leftList = [];
-				this.rightList = [];
-				this.awaitRenderList = [];
-				// 当前展示页码数据
-				this.showPage = 1;
-			},
-			// 启动渲染
-			startRender(){
-				if(!this.showList){
-					this.resetData();
-					return;
-				}
-				
-				if(!this.$props.list || this.$props.list.length < 1){
-					console.log('河浪瀑布流插件提示：当前数据为空，不会触发列表渲染');
-					return;
-				}
-				
-				// 若本次渲染为 重置 则先恢复组件的默认参数
-				if(this.$props.reset){
-					this.resetData();
-				}
-				
-				this.awaitRenderList = [...this.$props.list];
-				this.renderList();
-			}
-		}
-	}
-</script>
-
-<style lang="scss" scoped>
-	.waterfall-box {
-		padding: 20rpx 10rpx;
-		box-sizing: border-box;
-
-		>view {
-			padding: 0 10rpx;
-		}
-		
-		.list-item{
-			margin-bottom: 0;
-			// 设置透明，默认是可视的
-			opacity: 0;
-			// 默认超出隐藏，不影响加载中的文字显示效果
-			overflow: hidden;
-			height: 0;
-			
-			&.show{
-				margin-bottom: 20rpx;
-				opacity: 1;
-				overflow: auto;
-				height: auto;
-			}
-		}
-	}
-
-	.h-flex-x {
-		display: flex;
-		flex-direction: row;
-		flex-wrap: nowrap;
-		justify-content: flex-start;
-		align-items: flex-start;
-		align-content: flex-start;
-
-		&.h-flex-2 {
-			>view {
-				width: 50%;
-			}
-		}
-	}
-</style>
\ No newline at end of file
diff --git a/uniapp-extend/uni_modules/helang-waterfall/components/waterfall/waterfall-list.vue b/uniapp-extend/uni_modules/helang-waterfall/components/waterfall/waterfall-list.vue
index 71288b8..7441477 100644
--- a/uniapp-extend/uni_modules/helang-waterfall/components/waterfall/waterfall-list.vue
+++ b/uniapp-extend/uni_modules/helang-waterfall/components/waterfall/waterfall-list.vue
@@ -1,6 +1,6 @@
 <template>
 	<view>
-		<view class="waterfall-box">
+		<view class="waterfall-box" :class="{'hidden':hideList}">
 			<view class="h-flex-x helang-waterfall-slot">
 				<slot name="default" v-bind:colWidth="colWidth" v-bind:list="renderList"></slot>
 			</view>
@@ -9,8 +9,9 @@
 		<image 
 			class="load-image" 
 			v-for="(item,index) in waitRenderList" 
-			:src="item.__waterfall_imageUrl" 
 			:key="index" 
+			v-if="item.__waterfall_imageHeight === undefined"
+			:src="item | imageLoadUrl" 
 			:data-index="index"
 			@load="handleImageLoad" 
 			@error="handleImageLoad"
@@ -23,12 +24,12 @@
 	const IMAGE_HEIGHT_KEY = '__waterfall_imageHeight';
 	// 图片缓存键名
 	const IMAGE_CACHE_KEY = '__waterfall_cacheImageHeight';
-	// 图片链接键名
-	let IMAGE_URL_KEY = '';
-	// 图片加载键名
-	const IMAGE_LOAD_KEY = '__waterfall_imageUrl';
 	// 是否渲染
 	const ITEM_SHOW_KEY = '__waterfall_show';
+	// 图片链接键名
+	let IMAGE_URL_KEY = '';
+	// 图片PX宽度
+	let IMAGE_PX_WIDTH = 0;
 	
 	export default {
 		name:"helangWaterfallList",
@@ -39,11 +40,6 @@
 			
 		},
 		props:{
-			// 组件状态
-			status:{
-				type: String,
-				default:''
-			},
 			// 分栏
 			col:{
 				type: Number,
@@ -64,9 +60,19 @@
 				type: Boolean,
 				default:true
 			},
-			imagekey:{
+			imageKey:{
 				type: String,
 				default:'url'
+			},
+			// 隐藏列表
+			hideList:{
+				type: Boolean,
+				default:false
+			},
+		},
+		filters:{
+			imageLoadUrl(data){
+				return data[IMAGE_URL_KEY] ?? "";
 			}
 		},
 		watch:{
@@ -93,7 +99,8 @@
 			if(!uni[IMAGE_CACHE_KEY]){
 				uni[IMAGE_CACHE_KEY] = {};
 			}
-			IMAGE_URL_KEY = this.$props.imagekey;
+			IMAGE_URL_KEY = this.$props.imageKey;
+			IMAGE_PX_WIDTH = uni.upx2px(this.$props.imageWidth)
 		},
 		mounted() {
 			
@@ -112,84 +119,113 @@
 			},
 			// 处理图片加载
 			handleImageLoad(e){
-				const { height = 0 } = e.detail;
+				const { width = 0, height = 0 } = e.detail;
 				const { index } = e.currentTarget.dataset;
+				const renderHeight = width === 0 ? 0 : parseInt(IMAGE_PX_WIDTH / width * height);
 				
-				this.addWaitRenderListImageHeight(index, height);
-				console.log(e)
+				this.addWaitRenderListImageHeight(index, renderHeight);
 				
 				if(this.$props.cacheImageHeight){
 					const imageUrl = this.waitRenderList[index][IMAGE_URL_KEY];
 					if(imageUrl.length < 300){
-						uni[IMAGE_CACHE_KEY][imageUrl] = height;
+						uni[IMAGE_CACHE_KEY][imageUrl] = renderHeight;
 					}
 				}
+				
+				if(this.checkImageHaveHeight()){
+					this.addAllRenderData();
+				}
+			},
+			// 检查图片是否已全部包含高度
+			checkImageHaveHeight(){
+				const index = this.waitRenderList.findIndex((item)=>{
+					return item[IMAGE_HEIGHT_KEY] === undefined;
+				})
+				return index === -1 ? true : false;
 			},
 			// 待渲染列表添加图片高度数据
 			addWaitRenderListImageHeight(index,height){
 				this.waitRenderList[index][IMAGE_HEIGHT_KEY] = height;
-				
 			},
-			// 监听高度变化
-			handleHeightChange(index, height) {
-				/**
-				 * 这个为实际渲染后 CSS 中 margin-buttom 的值，本示例默认为20rpx
-				 * 用于解决实际渲染后因为数据条数关系，高度差计算偏差的问题
-				 * */
-				let marginBottom = uni.upx2px(20);
-				
-				// console.log(`左高：${this.leftHeight},右高：${this.rightHeight},当前高：${height},插入方向：${tag}`)
+			// 查找最小高度的列的索引
+			findSmallColIndex(){
+				let col = 0;
+				let size = this.renderListHeight[col];
+				this.renderListHeight.forEach((item,index)=>{
+					// console.log('=============================>>>>>>>>>>>',size,item,size-item)
+					let a = false;
+					if(item - size > 250){
+						a = true;
+						alert(`右比左高200以上`)
+					}else if(size - item > 250){
+						a = true;
+						alert(`左比右高200以上`)
+						
+					}
+					
+					if(item < size){
+						col = index;
+						size = item;
+					}
+					
+					if(a){
+						alert(`往 ${col} 添加 ${size}`)
+					}
+				});
+				return col;
+			},
+			// 追加渲染数据
+			pushRender(data){
+				const index = this.findSmallColIndex();
+
 				
-				if (tag == 'left') {
-					this.leftHeight += (height + marginBottom);
-				} else {
-					this.rightHeight += (height + marginBottom);
+				const h = data[IMAGE_HEIGHT_KEY];
+				if(index === this.aaa){
+					// alert(`重复插入同一侧 ${index},添加高${h},${JSON.stringify(this.renderListHeight)}`)
 				}
-				this.renderListFn();
+				this.aaa = index;
+				this.renderListHeight[index]+=h;
+				// console.log(`min`,index,this.renderListHeight);
+				
+				
+				this.renderList[index].push({
+					...data,
+					[IMAGE_HEIGHT_KEY]: `${data[IMAGE_HEIGHT_KEY]}px`
+				});
 			},
-			// 渲染列表，这里实现瀑布流的左右分栏
-			renderListFn() {
-				// 待渲染长度为 0 时表示已渲染完成
-				if(this.awaitRenderList.length < 1){
-					this.showPage++;
-					this.$emit("done");
-					
-					// 为防止 js 数值类型最大值溢出，当高度值大于 1亿时重置高度
-					if(this.leftHeight > 100000000){
-						if(this.leftHeight > this.rightHeight){
-							this.leftHeight = 2;
-							this.rightHeight = 1;
-						}else{
-							this.leftHeight = 1;
-							this.rightHeight = 2;
-						}
+			// 添加所有渲染数据
+			addAllRenderData(){
+				this.waitPushIndex = 0;
+				const add = ()=>{
+					const current = this.waitRenderList[this.waitPushIndex];
+					if(current === undefined){
+						this.waitRenderList = [];
+						// clog
+						console.log(`插入结束,${JSON.stringify(this.renderListHeight)}`)
+						
+						return;
 					}
+					this.pushRender(current);
+					this.waitPushIndex++;
+					
+					add();
+				};
+				add();
+			},
+			// 添加一条渲染数据
+			addOneRenderData(){
+				const index = this.waitPushIndex ?? 0;
+				const current = this.waitRenderList[index];
+				if(current === undefined){
 					return;
 				}
-				let item = {
-					...this.awaitRenderList.splice(0,1)[0],
-					// 当前数据添加当前页面标识
-					_current_page:this.showPage,
-					// 当前数据添加一个渲染id，解决 v-for 重复会出现不执行 load 的 BUG
-					_render_id:new Date().getTime()
-				};
-				
-				if(this.leftHeight > this.rightHeight){
-					this.rightList.push(item);
-				}else{
-					this.leftList.push(item);
+				this.pushRender(current);
+				this.waitPushIndex = index + 1;
+				if(this.waitPushIndex >= this.waitRenderList.length){
+					this.waitPushIndex = 0;
+					this.waitRenderList = [];
 				}
 			},
-			// 重置数据
-			resetData(){
-				this.leftHeight = 0;
-				this.rightHeight = 0;
-				this.leftList = [];
-				this.rightList = [];
-				this.awaitRenderList = [];
-				// 当前展示页码数据
-				this.showPage = 1;
-			},
 			// 启动渲染
 			render(list = [],reset = false){
 				if(!list?.length > 0){
@@ -197,6 +233,10 @@
 					return;
 				}
 				
+				if(reset){
+					this.initRenderList();
+				}
+				
 				this.waitRenderList = list.map((item)=>{
 					const imageUrl = item[IMAGE_URL_KEY];
 					const imageHeight = uni[IMAGE_CACHE_KEY][imageUrl];
@@ -204,35 +244,15 @@
 					
 					return {
 						...item,
-						[IMAGE_LOAD_KEY]: imageUrl,
 						[IMAGE_HEIGHT_KEY]: imageHeight,
 						[ITEM_SHOW_KEY]: show
 					}
-					
 				});
-				console.log(this.waitRenderList, reset);
-				return;
-				this.$props.list.forEach((item)=>{
-					console.log(item)
-					this.renderList[0].push(item)
-				})
-				if(!this.showList){
-					this.resetData();
-					return;
-				}
 				
-				if(!this.$props.list || this.$props.list.length < 1){
-					console.log('河浪瀑布流插件提示：当前数据为空，不会触发列表渲染');
-					return;
+				if(this.checkImageHaveHeight()){
+					this.addAllRenderData();
 				}
-				
-				// 若本次渲染为 重置 则先恢复组件的默认参数
-				if(this.$props.reset){
-					this.resetData();
-				}
-				
-				this.awaitRenderList = [...this.$props.list];
-				this.renderList();
+				// console.log(this.waitRenderList, reset);
 			}
 		}
 	}
@@ -252,9 +272,13 @@
 </style>
 <style lang="scss" scoped>
 	.waterfall-box {
-		padding: 20rpx 10rpx;
+		padding: 0 10rpx;
 		box-sizing: border-box;
 		
+		&.hidden{
+			display: none;
+		}
+		
 		.list-item{
 			margin-bottom: 0;
 			// 设置透明，默认是可视的
diff --git a/uniapp-extend/uni_modules/helang-waterfall/mock-data/waterfall-list.js b/uniapp-extend/uni_modules/helang-waterfall/mock-data/waterfall-list.js
index 81be4e7..ba045dd 100644
--- a/uniapp-extend/uni_modules/helang-waterfall/mock-data/waterfall-list.js
+++ b/uniapp-extend/uni_modules/helang-waterfall/mock-data/waterfall-list.js
@@ -1,4 +1,4 @@
-let list = ()=>{
+let list = (page)=>{
 	return new Promise((resolve,reject)=>{
 		setTimeout(() => {
 			// 生成随机数方法
@@ -22,7 +22,7 @@ let list = ()=>{
 			let t = `?t=${new Date().getTime()}`;
 			for (let i = 0; i < 10; i++) {
 				res.push({
-					id:i+1,
+					id:`${Date.now()}_${i+1}`,
 					url:`/uni_modules/helang-waterfall/static/waterfall/${random(0,3)}.jpg`,
 					title: titles[random(0, titles.length)],
 					money: random(9, 9999),
diff --git "a/uniapp-extend/uni_modules/helang-waterfall/pages/waterfall/waterfall - \345\211\257\346\234\254.vue" "b/uniapp-extend/uni_modules/helang-waterfall/pages/waterfall/waterfall - \345\211\257\346\234\254.vue"
deleted file mode 100644
index 6d3acdc..0000000
--- "a/uniapp-extend/uni_modules/helang-waterfall/pages/waterfall/waterfall - \345\211\257\346\234\254.vue"	
+++ /dev/null
@@ -1,247 +0,0 @@
-<template>
-	<view>
-		<helang-waterfall-list
-			:status="waterfall.status"
-			:list="waterfall.list"
-			:reset="waterfall.reset"
-			@click="onClick"
-			@done="onDone"
-		>
-			<template>
-				<view v-if="waterfall.status == 'await'">
-					<view class="load-txt">上拉加载更多</view>
-				</view>
-				<view v-else-if="waterfall.status == 'loading'">
-					<view class="load-txt">加载中</view>
-				</view>
-				<view v-else-if="waterfall.status == 'success'">
-					<view class="load-txt">加载中</view>
-				</view>
-				<view v-else-if="waterfall.status == 'finish'">
-					<view class="load-txt">没有更多了</view>
-				</view>
-				<view v-else-if="waterfall.status == 'fail'">
-					<image class="load-icon" src="../../static/waterfall/fail.png"></image>
-					<view class="load-txt">出错了，请刷新重试</view>
-				</view>
-				<view v-else-if="waterfall.status == 'empty'">
-					<image class="load-icon" src="../../static/waterfall/empty.png"></image>
-					<view class="load-txt">暂无数据</view>
-				</view>
-				<view v-else><!-- 别问我为什么要写一个 v-else 的空 view,不写H5平台就会有CSS生效的离谱BUG --></view>
-			</template>
-		</helang-waterfall-list>
-		
-		<view class="status-change" @tap="onStatusChange">
-			<view>切换<br />状态</view>
-		</view>
-	</view>
-</template>
-
-<script>
-	import helangWaterfallList from "@/uni_modules/helang-waterfall/components/waterfall/waterfall-list"
-	
-	// 列表接口模拟数据
-	import mockData from '../../mock-data/waterfall-list.js'
-	
-	export default {
-		components: {
-			"helang-waterfall-list": helangWaterfallList
-		},
-		data() {
-			return {
-				// 异步请求相关
-				ajax: {
-					// 是否可以加载
-					load: true,
-					// 每页的请求条件
-					rows:10,
-					// 页码
-					page:1,
-					// 数据列表
-					dataList:[]
-				},
-				// 瀑布流组件相关
-				waterfall:{
-					status:"",
-					reset:false,
-					list:[]
-				}
-				
-			}
-		},
-		onReady() {
-			this.getList();
-		},
-		// 触底触发
-		onReachBottom() {
-			this.getList();
-		},
-		// 下拉刷新
-		onPullDownRefresh(){
-			// 正常情况下接口返回应该很会很快。故意延迟调用，让用户有在刷新的体验感
-			setTimeout(()=>{
-				this.ajax.page = 1;
-				this.ajax.load = true;
-				this.getList();
-			},800);
-		},
-		methods: {
-			// 瀑布流组件点击事件
-			onClick(data,index, tag){
-				console.log(data);
-				let direction = {
-					"left":'左',
-					"right":'右'
-				}
-				uni.showToast({
-					title:`${direction[tag]}侧列表第${index+1}个被点击`,
-					icon:'none'
-				})
-			},
-			// 瀑布流组件渲染完成
-			onDone(){
-				// 设置组件为 非重置，这行代码保留不删即可
-				this.waterfall.reset = false;
-				
-				// 恢复 getList 方法的调用
-				this.ajax.load = true;
-				this.ajax.page++;
-				
-				// 设置组件状态为 等待加载
-				this.waterfall.status = 'await';
-
-				/**
-				 * 如果你是一个追求完美的开发者，可以通过判断当前数据的长度和请求的数据长度来优化前端请求，减少不必要请求
-				 * 不需要则删除
-				 * */
-				/**
-				if(this.ajax.dataCount >= this.ajax.rows){
-					this.ajax.load = true;
-					this.ajax.page++;
-				}
-				*/
-			},
-			// 获取数据
-			getList() {
-				if (!this.ajax.load) {
-					return;
-				}
-				this.ajax.load = false;
-				
-				// 设置状态为加载中
-				this.waterfall.status = 'loading';
-				
-				// 请求数据， mockData.getList 示例一个 ajax 请求
-				mockData.getList({
-					pageNum:this.ajax.page,
-					pageSize:this.ajax.rows
-				}).then(res=>{
-					// 获取到的数据，请注意数据结构
-					console.log(res);
-					
-					// 第一页数据执行以下代码
-					if(this.ajax.page == 1){
-						// 关闭下拉
-						uni.stopPullDownRefresh();
-						
-						// 设置组件状态为 重置，可供下拉刷新这类需要重置列表功能时使用
-						this.waterfall.reset = true;
-					}
-					
-					// 数据无效时处理
-					if(!res || res.length < 1){
-						// 设置组件为 加载结束 状态
-						this.waterfall.status = 'finish';
-						return;
-					}
-					
-					// 将数据赋值给瀑布流 list 属性
-					this.waterfall.list = res;
-					// 设置组件为 加载成功 状态，此时瀑布流组件开始计算当前数据的布局
-					this.waterfall.status = 'success';
-					
-					/**
-					 * 下方的代码为扩展其他功能的示例代码 可做参考，不需要可删除
-					 * */ 
-					
-					// 缓存当前数据给其他需要该数据的功能使用
-					if(this.ajax.page == 1){
-						this.ajax.dataList = res;
-					}else{
-						this.ajax.dataList = [...this.ajax.dataList,...res];
-					}
-					// 记录本次数据长度，意义请看 done 事件的回调
-					this.ajax.dataCount = res.length || 0;
-					
-					// 。。。下面不需要写代码了，等待组件渲染完成
-				})
-			},
-			// 导航状态切换演示监听
-			onStatusChange(){
-				uni.showActionSheet({
-					itemList: ['常规', '加载异常', '加载错误'],
-					success: (res)=> {
-						switch(res.tapIndex){
-							case 0:
-								this.ajax.page = 1;
-								this.ajax.load = true;
-								this.getList();
-								break;
-							case 1:
-								// alert(111)
-								this.waterfall.status = 'fail';
-								break;
-							case 2:
-								this.waterfall.status = 'empty';
-								break;
-							default:
-						}
-					}
-				});
-			},
-		}
-	}
-</script>
-
-<style lang="scss">
-	page {
-		background-color: #f3f3f3;
-	}
-	
-	.load-txt{
-		padding: 0 0 20rpx 0;
-		text-align: center;
-		color: #999;
-		font-size: 24rpx;
-	}
-	
-	.load-icon{
-		width: 300rpx;
-		height: 300rpx;
-		margin: 0 auto 20rpx auto;
-		display: block;
-	}
-	
-	.status-change{
-		position: fixed;
-		right: 10rpx;
-		top: 60%;
-		width: 80rpx;
-		height: 80rpx;
-		z-index: 100;
-		font-size: 24rpx;
-		border-radius: 50%;
-		background-color: #0089ff;
-		color: #fff;
-		line-height: 1;
-		opacity: .33;
-		
-		display: flex;
-		flex-direction: row;
-		flex-wrap: nowrap;
-		justify-content: center;
-		align-items: center;
-		align-content: center;
-	}
-</style>
\ No newline at end of file
diff --git a/uniapp-extend/uni_modules/helang-waterfall/pages/waterfall/waterfall.vue b/uniapp-extend/uni_modules/helang-waterfall/pages/waterfall/waterfall.vue
index dbfa2ee..0ff6565 100644
--- a/uniapp-extend/uni_modules/helang-waterfall/pages/waterfall/waterfall.vue
+++ b/uniapp-extend/uni_modules/helang-waterfall/pages/waterfall/waterfall.vue
@@ -1,36 +1,36 @@
 <template>
-	<view>
-		<waterfall 
-			ref="helangWaterfall" 
-			:col="waterfall.col" 
-			:status="waterfall.status"
-			:imageWidth="300"
-			:cacheImageHeight="false"
-		>
+	<view style="padding: 20rpx 0;">
+		<waterfall ref="helangWaterfall" :cacheImageHeight="false">
 			<template v-slot:default="{ list, colWidth }">
 				<waterfall-col 
-					v-for="(item,index) in list" 
-					:key="index" 
+					v-for="(colItem,colIndex) in list" 
+					:key="colIndex" 
 					:colWidth="colWidth"
 				>
 					<template>
-						<waterfall-item @height="onHeight" v-for="(item2,index2) in item" :key="index2">
-							<image :src="item2.url" style="width: 100%;"></image>
+						<waterfall-item @height="onHeight" v-for="(item,index) in colItem" :key="item.id">
+							<content-1 :renderData="item" :colIndex="colIndex" :itemIndex="index" />
 						</waterfall-item>
 					</template>
 				</waterfall-col>
 			</template>
 			<template #tips>
-				<button>加载中</button>
+				<view class="load-txt">
+					<view  style="padding-top: 30rpx;">加载中</view>
+				</view>
 			</template>
 		</waterfall>
 	</view>
 </template>
 
 <script>
+	// 瀑布流组件
 	import Waterfall from "@/uni_modules/helang-waterfall/components/waterfall/waterfall-list";
-	import WaterfallCol from "@/uni_modules/helang-waterfall/components/waterfall/waterfall-col"
-	import WaterfallItem from "@/uni_modules/helang-waterfall/components/waterfall/waterfall-item"
+	import WaterfallCol from "@/uni_modules/helang-waterfall/components/waterfall/waterfall-col";
+	import WaterfallItem from "@/uni_modules/helang-waterfall/components/waterfall/waterfall-item";
+	
+	// 页面渲染组件
+	import Content_1 from "../../components/content_1.vue";
 	
 	// 列表接口模拟数据
 	import mockData from '../../mock-data/waterfall-list.js'
@@ -39,7 +39,8 @@
 		components: {
 			"waterfall": Waterfall,
 			"waterfall-col": WaterfallCol,
-			"waterfall-item": WaterfallItem
+			"waterfall-item": WaterfallItem,
+			"content-1": Content_1
 		},
 		data() {
 			return {
@@ -57,7 +58,7 @@
 				// 瀑布流组件相关
 				waterfall:{
 					col:2,
-					status:""
+					hideList:false
 				}
 				
 			}
@@ -75,48 +76,13 @@
 			setTimeout(()=>{
 				this.ajax.page = 1;
 				this.ajax.load = true;
-				this.getList();
+				this.getList(this.ajax.page);
 			},800);
 		},
 		methods: {
 			onHeight(e){
 				// console.log(e)
 			},
-			// 瀑布流组件点击事件
-			onClick(data,index, tag){
-				console.log(data);
-				let direction = {
-					"left":'左',
-					"right":'右'
-				}
-				uni.showToast({
-					title:`${direction[tag]}侧列表第${index+1}个被点击`,
-					icon:'none'
-				})
-			},
-			// 瀑布流组件渲染完成
-			onDone(){
-				// 设置组件为 非重置，这行代码保留不删即可
-				this.waterfall.reset = false;
-				
-				// 恢复 getList 方法的调用
-				this.ajax.load = true;
-				this.ajax.page++;
-				
-				// 设置组件状态为 等待加载
-				this.waterfall.status = 'await';
-
-				/**
-				 * 如果你是一个追求完美的开发者，可以通过判断当前数据的长度和请求的数据长度来优化前端请求，减少不必要请求
-				 * 不需要则删除
-				 * */
-				/**
-				if(this.ajax.dataCount >= this.ajax.rows){
-					this.ajax.load = true;
-					this.ajax.page++;
-				}
-				*/
-			},
 			// 获取数据
 			getList() {
 				if (!this.ajax.load) {
@@ -124,8 +90,7 @@
 				}
 				this.ajax.load = false;
 				
-				// 设置状态为加载中
-				this.waterfall.status = 'loading';
+
 				
 				// 请求数据， mockData.getList 示例一个 ajax 请求
 				mockData.getList({
@@ -139,40 +104,18 @@
 					if(this.ajax.page == 1){
 						// 关闭下拉
 						uni.stopPullDownRefresh();
-						
-						// 设置组件状态为 重置，可供下拉刷新这类需要重置列表功能时使用
-						this.waterfall.reset = true;
 					}
 					
 					// 数据无效时处理
 					if(!res || res.length < 1){
 						// 设置组件为 加载结束 状态
-						this.waterfall.status = 'finish';
 						return;
 					}
 					
-					this.$refs.helangWaterfall.render([...res,{url:'233434'}]);
-					return;
-					
-					// 将数据赋值给瀑布流 list 属性
-					// this.waterfall.list = [...res,{url:'233434'}];
-					// 设置组件为 加载成功 状态，此时瀑布流组件开始计算当前数据的布局
-					this.waterfall.status = 'success';
-					
-					/**
-					 * 下方的代码为扩展其他功能的示例代码 可做参考，不需要可删除
-					 * */ 
-					
-					// 缓存当前数据给其他需要该数据的功能使用
-					if(this.ajax.page == 1){
-						this.ajax.dataList = res;
-					}else{
-						this.ajax.dataList = [...this.ajax.dataList,...res];
-					}
-					// 记录本次数据长度，意义请看 done 事件的回调
-					this.ajax.dataCount = res.length || 0;
-					
-					// 。。。下面不需要写代码了，等待组件渲染完成
+					const reset  = this.ajax.page === 1 ? true : false;
+					this.$refs.helangWaterfall.render(res,reset);
+					this.ajax.load = true;
+					this.ajax.page++;
 				})
 			},
 			// 导航状态切换演示监听
-- 
Gitee


From 724d84d6dfc38e0d817366bf878a236e1a9b69b5 Mon Sep 17 00:00:00 2001
From: helang <helang.love@qq.com>
Date: Mon, 7 Oct 2024 15:09:45 +0800
Subject: [PATCH 4/4] =?UTF-8?q?feat:=20=E7=80=91=E5=B8=83=E6=B5=81=20v1.2.?=
 =?UTF-8?q?1?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../uni_modules/helang-waterfall/changelog.md |   4 +-
 .../helang-waterfall/components/content_1.vue |  94 ----------
 .../components/waterfall/waterfall-col.vue    |   2 +-
 .../components/waterfall/waterfall-item.vue   |  22 +--
 .../components/waterfall/waterfall-list.vue   |  67 +++----
 .../mock-data/waterfall-list.js               |   4 +-
 .../pages/waterfall/waterfall.vue             | 175 ++++++++++++++----
 .../uni_modules/helang-waterfall/readme.md    | 117 +++++++++++-
 .../\347\200\221\345\270\203\346\265\201.md"  | 102 ----------
 9 files changed, 295 insertions(+), 292 deletions(-)
 delete mode 100644 uniapp-extend/uni_modules/helang-waterfall/components/content_1.vue
 delete mode 100644 "\346\226\207\346\241\243/\347\200\221\345\270\203\346\265\201.md"

diff --git a/uniapp-extend/uni_modules/helang-waterfall/changelog.md b/uniapp-extend/uni_modules/helang-waterfall/changelog.md
index 344391d..ab28fbd 100644
--- a/uniapp-extend/uni_modules/helang-waterfall/changelog.md
+++ b/uniapp-extend/uni_modules/helang-waterfall/changelog.md
@@ -1,3 +1,5 @@
+## 1.2.1（2024-10-07）
+全新升级为组件+插槽的方案实现，极大的简便了组件的使用和内容调整。
 ## 1.1.6（2022-10-24）
 修复 初始化渲染变量取值错误问题
 ## 1.1.5（2022-10-24）
@@ -19,4 +21,4 @@
 ## 1.1.0（2022-08-22）
 重写渲染列表逻辑
 ## 1.0.1（2021-06-08）
-修改插入方向计算方式
+修改插入方向计算方式
\ No newline at end of file
diff --git a/uniapp-extend/uni_modules/helang-waterfall/components/content_1.vue b/uniapp-extend/uni_modules/helang-waterfall/components/content_1.vue
deleted file mode 100644
index a24cdac..0000000
--- a/uniapp-extend/uni_modules/helang-waterfall/components/content_1.vue
+++ /dev/null
@@ -1,94 +0,0 @@
-<template>
-	<view class="content" @click="handleClick">
-		<image class="image" mode="aspectFill" :src="renderData.url" :style="{height:renderData.__waterfall_imageHeight}"></image>
-		<view class="shop ellipsis-1">{{renderData.shop}}</view>
-		<view class="label ellipsis-1">{{renderData.label}}</view>
-		<view class="money ellipsis-1">{{renderData.money}}</view>
-	</view>
-</template>
-
-<script>
-	
-	export default {
-		props:{
-			// 分栏索引
-			colIndex:{
-				type: Number,
-				default:0
-			},
-			// 当前栏的数据索引
-			itemIndex:{
-				type: Number,
-				default:0
-			},
-			renderData:{
-				type: Object,
-				default:()=>{
-					return {};
-				}
-			}
-		},
-		components: {
-			
-		},
-		data() {
-			return {
-				
-			}
-		},
-		
-		methods: {
-			// 瀑布流组件点击事件
-			handleClick(){
-				console.log(this.$props.renderData);
-				uni.showToast({
-					title:`第${this.$props.colIndex+1}栏的${this.$props.itemIndex+1}个被点击`,
-					icon:'none'
-				});
-			}
-		}
-	}
-</script>
-
-<style lang="scss">
-	.content{
-		padding: 20rpx;
-		background-color: white;
-		border-radius: 4px;
-		line-height: 1.3;
-		
-		.image{
-			display: block;
-			width: 100%;
-			height: auto;
-		}
-		
-		.ellipsis-1{
-			white-space:nowrap;        // 强制一行显示
-			overflow:hidden;          // 超出隐藏
-			text-overflow:ellipsis;   // 省略号
-		}
-		
-		.shop{
-			font-size: 32rpx;
-			color:#666;
-			margin: 20rpx 0;
-		}
-		
-		.label{
-			padding: 10rpx 20rpx;
-			border-radius: 100px;
-			background-color: #F00;
-			color: white;
-			font-size: 24rpx;
-			display: inline-block;
-			line-height: 1;
-		}
-		
-		.money{
-			font-size: 28rpx;
-			color:#F00;
-			margin-top: 10rpx;
-		}
-	}
-</style>
\ No newline at end of file
diff --git a/uniapp-extend/uni_modules/helang-waterfall/components/waterfall/waterfall-col.vue b/uniapp-extend/uni_modules/helang-waterfall/components/waterfall/waterfall-col.vue
index 59e9fa6..980a3cc 100644
--- a/uniapp-extend/uni_modules/helang-waterfall/components/waterfall/waterfall-col.vue
+++ b/uniapp-extend/uni_modules/helang-waterfall/components/waterfall/waterfall-col.vue
@@ -16,7 +16,7 @@
 			
 		},
 		props:{
-			// 组件状态
+			// 栏目宽度
 			colWidth:{
 				type: String,
 				default:''
diff --git a/uniapp-extend/uni_modules/helang-waterfall/components/waterfall/waterfall-item.vue b/uniapp-extend/uni_modules/helang-waterfall/components/waterfall/waterfall-item.vue
index 8009f7e..33d5f50 100644
--- a/uniapp-extend/uni_modules/helang-waterfall/components/waterfall/waterfall-item.vue
+++ b/uniapp-extend/uni_modules/helang-waterfall/components/waterfall/waterfall-item.vue
@@ -12,19 +12,9 @@
 			virtualHost: true
 		},
 		props:{
-			params:{
-				type: Object,
-				default(){
-					return {}
-				}
-			},
-			tag:{
-				type:String | Number,
-				default:''
-			},
-			index:{
+			colIndex:{
 				type:Number,
-				default:-1
+				default:0
 			}
 		},
 		data() {
@@ -37,11 +27,15 @@
 		},
 		methods:{
 			async postHeight(){
-				await wait(100);
+				// 添加一个异步的宏任务，部分低性能的移动设备会因为渲染问题导致上报的高度存在错误问题
+				await wait(10);
 				const query = uni.createSelectorQuery().in(this);
 				query.select('.waterfall-item').boundingClientRect(data => {
 					let height = Math.floor(data.height);
-					this.$emit("height",height);
+					this.$emit("height",{
+						colIndex:this.$props.colIndex,
+						height
+					});
 				}).exec();
 			}
 		}
diff --git a/uniapp-extend/uni_modules/helang-waterfall/components/waterfall/waterfall-list.vue b/uniapp-extend/uni_modules/helang-waterfall/components/waterfall/waterfall-list.vue
index 7441477..2a3a10a 100644
--- a/uniapp-extend/uni_modules/helang-waterfall/components/waterfall/waterfall-list.vue
+++ b/uniapp-extend/uni_modules/helang-waterfall/components/waterfall/waterfall-list.vue
@@ -30,6 +30,15 @@
 	let IMAGE_URL_KEY = '';
 	// 图片PX宽度
 	let IMAGE_PX_WIDTH = 0;
+	// 渲染状态
+	const RENDER_STATUS = {
+		// 加载中
+		LOADING: 'RENDER_LOADING',
+		// 渲染开始
+		START:'RENDER_START',
+		// 渲染结束
+		END:'RENDER_END'
+	};
 	
 	export default {
 		name:"helangWaterfallList",
@@ -50,16 +59,12 @@
 				type: Number,
 				default:305
 			},
-			// 内容相同高度
-			sameHeight:{
-				type: Boolean,
-				default:true
-			},
 			// 缓存高度(加速渲染)
 			cacheImageHeight:{
 				type: Boolean,
 				default:true
 			},
+			// 图片链接键名
 			imageKey:{
 				type: String,
 				default:'url'
@@ -133,7 +138,8 @@
 				}
 				
 				if(this.checkImageHaveHeight()){
-					this.addAllRenderData();
+					this.emitRenderStatusChange(RENDER_STATUS.START);
+					this.addRenderData();
 				}
 			},
 			// 检查图片是否已全部包含高度
@@ -152,57 +158,29 @@
 				let col = 0;
 				let size = this.renderListHeight[col];
 				this.renderListHeight.forEach((item,index)=>{
-					// console.log('=============================>>>>>>>>>>>',size,item,size-item)
-					let a = false;
-					if(item - size > 250){
-						a = true;
-						alert(`右比左高200以上`)
-					}else if(size - item > 250){
-						a = true;
-						alert(`左比右高200以上`)
-						
-					}
-					
 					if(item < size){
 						col = index;
 						size = item;
 					}
-					
-					if(a){
-						alert(`往 ${col} 添加 ${size}`)
-					}
 				});
 				return col;
 			},
 			// 追加渲染数据
 			pushRender(data){
 				const index = this.findSmallColIndex();
-
-				
-				const h = data[IMAGE_HEIGHT_KEY];
-				if(index === this.aaa){
-					// alert(`重复插入同一侧 ${index},添加高${h},${JSON.stringify(this.renderListHeight)}`)
-				}
-				this.aaa = index;
-				this.renderListHeight[index]+=h;
-				// console.log(`min`,index,this.renderListHeight);
-				
 				
 				this.renderList[index].push({
 					...data,
 					[IMAGE_HEIGHT_KEY]: `${data[IMAGE_HEIGHT_KEY]}px`
 				});
 			},
-			// 添加所有渲染数据
+			// 添加所有渲染数据，方案存在问题暂
 			addAllRenderData(){
 				this.waitPushIndex = 0;
 				const add = ()=>{
 					const current = this.waitRenderList[this.waitPushIndex];
 					if(current === undefined){
 						this.waitRenderList = [];
-						// clog
-						console.log(`插入结束,${JSON.stringify(this.renderListHeight)}`)
-						
 						return;
 					}
 					this.pushRender(current);
@@ -212,11 +190,21 @@
 				};
 				add();
 			},
+			// 渲染状态变更
+			emitRenderStatusChange(status){
+				this.$emit("statusChange",status);
+			},
+			// 提交高度
+			reportHeight(colIndex,height){
+				this.renderListHeight[colIndex]+=height;
+				this.addRenderData();
+			},
 			// 添加一条渲染数据
-			addOneRenderData(){
+			addRenderData(){
 				const index = this.waitPushIndex ?? 0;
 				const current = this.waitRenderList[index];
 				if(current === undefined){
+					this.emitRenderStatusChange(RENDER_STATUS.END);
 					return;
 				}
 				this.pushRender(current);
@@ -245,14 +233,17 @@
 					return {
 						...item,
 						[IMAGE_HEIGHT_KEY]: imageHeight,
+						// 该属性暂未使用，预留字段
 						[ITEM_SHOW_KEY]: show
 					}
 				});
 				
+				this.emitRenderStatusChange(RENDER_STATUS.LOADING);
+				
 				if(this.checkImageHaveHeight()){
-					this.addAllRenderData();
+					this.emitRenderStatusChange(RENDER_STATUS.START);
+					this.addRenderData();
 				}
-				// console.log(this.waitRenderList, reset);
 			}
 		}
 	}
diff --git a/uniapp-extend/uni_modules/helang-waterfall/mock-data/waterfall-list.js b/uniapp-extend/uni_modules/helang-waterfall/mock-data/waterfall-list.js
index ba045dd..910677a 100644
--- a/uniapp-extend/uni_modules/helang-waterfall/mock-data/waterfall-list.js
+++ b/uniapp-extend/uni_modules/helang-waterfall/mock-data/waterfall-list.js
@@ -23,7 +23,7 @@ let list = (page)=>{
 			for (let i = 0; i < 10; i++) {
 				res.push({
 					id:`${Date.now()}_${i+1}`,
-					url:`/uni_modules/helang-waterfall/static/waterfall/${random(0,3)}.jpg`,
+					imgUrl:`/uni_modules/helang-waterfall/static/waterfall/${random(0,3)}.jpg`,
 					title: titles[random(0, titles.length)],
 					money: random(9, 9999),
 					label:'官方自营',
@@ -31,7 +31,7 @@ let list = (page)=>{
 				})
 			}			
 			resolve(res);
-		}, 500);
+		}, 1000);
 	})
 }
 
diff --git a/uniapp-extend/uni_modules/helang-waterfall/pages/waterfall/waterfall.vue b/uniapp-extend/uni_modules/helang-waterfall/pages/waterfall/waterfall.vue
index 0ff6565..bad860e 100644
--- a/uniapp-extend/uni_modules/helang-waterfall/pages/waterfall/waterfall.vue
+++ b/uniapp-extend/uni_modules/helang-waterfall/pages/waterfall/waterfall.vue
@@ -1,6 +1,11 @@
 <template>
 	<view style="padding: 20rpx 0;">
-		<waterfall ref="helangWaterfall" :cacheImageHeight="false">
+		<waterfall 
+			ref="helangWaterfall" 
+			:hideList="hideList"
+			imageKey="imgUrl"
+			@statusChange="handleStatusChange"
+		>
 			<template v-slot:default="{ list, colWidth }">
 				<waterfall-col 
 					v-for="(colItem,colIndex) in list" 
@@ -8,18 +13,49 @@
 					:colWidth="colWidth"
 				>
 					<template>
-						<waterfall-item @height="onHeight" v-for="(item,index) in colItem" :key="item.id">
-							<content-1 :renderData="item" :colIndex="colIndex" :itemIndex="index" />
+						<waterfall-item  
+							v-for="(item,index) in colItem" 
+							:key="item.id" 
+							:colIndex="colIndex"
+							@height="onRenderHeight"
+						>
+							<view class="content" @click="handleClick" :data-col_index="colIndex" :data-item_index="index">
+								<image 
+									class="image" 
+									mode="aspectFill" 
+									:src="item.imgUrl" 
+									:style="{height:item.__waterfall_imageHeight}"
+								>
+									<!-- 必须给图片的高度这事为 __waterfall_imageHeight 属性的高 -->
+								</image>
+								<view class="title">{{item.title}}</view>
+								<view class="label ellipsis-1">{{item.label}}</view>
+								<view class="money ellipsis-1">价格：{{item.money}}元</view>
+								<view class="shop ellipsis-1">{{item.shop}}</view>
+							</view>
 						</waterfall-item>
 					</template>
 				</waterfall-col>
 			</template>
 			<template #tips>
 				<view class="load-txt">
-					<view  style="padding-top: 30rpx;">加载中</view>
+					<view v-if="hideList">
+						<template v-if="waterfall.status === 'fail'">
+							<image src="/uni_modules/helang-waterfall/static/waterfall/fail.png" mode="aspectFit"></image>
+							<view>数据异常</view>
+						</template>
+						<template v-else-if="waterfall.status === 'empty'">
+							<image src="/uni_modules/helang-waterfall/static/waterfall/empty.png" mode="aspectFit"></image>
+							<view>暂无内容</view>
+						</template>
+					</view>
+					<view v-else style="padding-top: 30rpx;">加载中</view>
+					
 				</view>
 			</template>
 		</waterfall>
+		<!-- 演示多种效果 -->
+		<view class="status-change" @click="onStatusChange">设置</view>
 	</view>
 </template>
 
@@ -29,18 +65,19 @@
 	import WaterfallCol from "@/uni_modules/helang-waterfall/components/waterfall/waterfall-col";
 	import WaterfallItem from "@/uni_modules/helang-waterfall/components/waterfall/waterfall-item";
 	
-	// 页面渲染组件
-	import Content_1 from "../../components/content_1.vue";
-	
-	// 列表接口模拟数据
+	// 列表接口模拟数据，真是项目不需要
 	import mockData from '../../mock-data/waterfall-list.js'
 	
 	export default {
 		components: {
 			"waterfall": Waterfall,
 			"waterfall-col": WaterfallCol,
-			"waterfall-item": WaterfallItem,
-			"content-1": Content_1
+			"waterfall-item": WaterfallItem
+		},
+		computed:{
+			hideList(){
+				return ['fail','empty'].includes(this.waterfall.status);
+			}
 		},
 		data() {
 			return {
@@ -57,10 +94,9 @@
 				},
 				// 瀑布流组件相关
 				waterfall:{
-					col:2,
-					hideList:false
+					status:'',
+					renderEnd:true
 				}
-				
 			}
 		},
 		onReady() {
@@ -80,18 +116,20 @@
 			},800);
 		},
 		methods: {
-			onHeight(e){
-				// console.log(e)
+			// 监听渲染高度，此事件为必用
+			onRenderHeight(e){
+				const { colIndex, height } = e;
+				// 上报当前高度，上报后会自动触发下一项数据的渲染
+				this.$refs.helangWaterfall.reportHeight(colIndex,height);
 			},
 			// 获取数据
 			getList() {
-				if (!this.ajax.load) {
+				// 请求和渲染未完成前禁止发起请求
+				if (!this.ajax.load || !this.waterfall.renderEnd) {
 					return;
 				}
 				this.ajax.load = false;
 				
-
-				
 				// 请求数据， mockData.getList 示例一个 ajax 请求
 				mockData.getList({
 					pageNum:this.ajax.page,
@@ -108,11 +146,18 @@
 					
 					// 数据无效时处理
 					if(!res || res.length < 1){
-						// 设置组件为 加载结束 状态
+						// 设置提示内容
+						this.waterfall.status = this.ajax.page === 1 ? 'fail' : 'empty';
 						return;
 					}
 					
+					// 当前页面页面为1时，表示列表重绘，场景一般是 刷新/搜索 时
 					const reset  = this.ajax.page === 1 ? true : false;
+					// 若是重绘列表的话，需要取消 `hideList`属性，隐藏状态下会引发列表尺寸获取错误的问题
+					if(reset){
+						this.waterfall.status = '';
+					}
+					// 调用 render 方法，使组件开始进入渲染阶段
 					this.$refs.helangWaterfall.render(res,reset);
 					this.ajax.load = true;
 					this.ajax.page++;
@@ -120,27 +165,31 @@
 			},
 			// 导航状态切换演示监听
 			onStatusChange(){
+				const vlaues = ['','fail','empty'];
+				const labels = ['正常展示', '加载异常', '无结果'];
 				uni.showActionSheet({
-					itemList: ['常规', '加载异常', '加载错误'],
+					itemList: labels,
 					success: (res)=> {
-						switch(res.tapIndex){
-							case 0:
-								this.ajax.page = 1;
-								this.ajax.load = true;
-								this.getList();
-								break;
-							case 1:
-								// alert(111)
-								this.waterfall.status = 'fail';
-								break;
-							case 2:
-								this.waterfall.status = 'empty';
-								break;
-							default:
-						}
+						this.waterfall.status = vlaues[res.tapIndex];
 					}
 				});
 			},
+			// 瀑布流组件点击事件
+			handleClick(e){
+				const { col_index, item_index } = e?.currentTarget?.dataset;
+				uni.showToast({
+					title:`第${col_index+1}栏的${item_index+1}个被点击`,
+					icon:'none'
+				});
+			},
+			// 处理瀑布流渲染状态
+			handleStatusChange(status){
+				if(status === 'RENDER_END'){
+					this.waterfall.renderEnd = true;
+				}else{
+					this.waterfall.renderEnd = false;
+				}
+			}
 		}
 	}
 </script>
@@ -150,8 +199,55 @@
 		background-color: #f3f3f3;
 	}
 	
+	.content{
+		padding: 20rpx;
+		background-color: white;
+		border-radius: 4px;
+		line-height: 1.3;
+		
+		.image{
+			display: block;
+			width: 100%;
+			height: auto;
+		}
+		
+		.ellipsis-1{
+			white-space:nowrap;        // 强制一行显示
+			overflow:hidden;          // 超出隐藏
+			text-overflow:ellipsis;   // 省略号
+		}
+		
+		.title{
+			font-size: 28rpx;
+			color:#666;
+			margin: 20rpx 0;
+		}
+		
+		.shop{
+			font-size: 24rpx;
+			color:#666;
+			margin-top: 20rpx;
+		}
+		
+		.label{
+			padding: 10rpx 20rpx;
+			border-radius: 100px;
+			background-color: #F00;
+			color: white;
+			font-size: 24rpx;
+			display: inline-block;
+			line-height: 1;
+		}
+		
+		.money{
+			font-size: 28rpx;
+			color:#F00;
+			margin-top: 10rpx;
+		}
+	}
+	
 	.load-txt{
-		padding: 0 0 20rpx 0;
+		padding:  0;
 		text-align: center;
 		color: #999;
 		font-size: 24rpx;
@@ -166,17 +262,18 @@
 	
 	.status-change{
 		position: fixed;
-		right: 10rpx;
+		left: 10rpx;
 		top: 60%;
 		width: 80rpx;
 		height: 80rpx;
 		z-index: 100;
 		font-size: 24rpx;
 		border-radius: 50%;
-		background-color: #0089ff;
+		background-color: #f00;
 		color: #fff;
 		line-height: 1;
-		opacity: .33;
+		opacity: .7;
+		box-shadow: 0 0 10px black;
 		
 		display: flex;
 		flex-direction: row;
diff --git a/uniapp-extend/uni_modules/helang-waterfall/readme.md b/uniapp-extend/uni_modules/helang-waterfall/readme.md
index b2fb6f8..e092d17 100644
--- a/uniapp-extend/uni_modules/helang-waterfall/readme.md
+++ b/uniapp-extend/uni_modules/helang-waterfall/readme.md
@@ -1 +1,116 @@
-# helang-waterfall
\ No newline at end of file
+# 瀑布流 helang-waterfall
+
+## 插件简介
+
+> 这是一款简单又好用的瀑布流布局组件，从`1.2.1`版本开始全新升级为组件+插槽的方案实现，极大的简便了组件的使用和内容调整。
+
+#### <font color="red">源码中有详细的注释，请各位开发者按个人需求自行修改。</font>
+
+### <font color="red">对使用有疑问，可以先导入 [示例项目] 学习 页面与组件的使用流程</font>
+
+## 组件使用
+
+### 示例源码
+
+> 示例源码较多，请下载示例项目查看
+
+### 组件清单
+```javascript
+// 引用组件
+/* 瀑布流组件 */
+// 容器组件
+import Waterfall from "@/uni_modules/helang-waterfall/components/waterfall/waterfall-list";
+// 分栏组件
+import WaterfallCol from "@/uni_modules/helang-waterfall/components/waterfall/waterfall-col";
+// 内容组件
+import WaterfallItem from "@/uni_modules/helang-waterfall/components/waterfall/waterfall-item";
+
+
+export default {
+	// ...
+	// 注册组件
+	components: {
+		"waterfall": Waterfall,
+		"waterfall-col": WaterfallCol,
+		"waterfall-item": WaterfallItem
+	},
+	// ...
+}
+```
+
+### 容器组件 waterfall-list
+
+#### 插槽 
+插槽名称 | 说明
+--------|------
+default | 瀑布流列表内容，放置 `waterfall-col` 组件
+tips | 瀑布流列表下方提示信息
+
+####  属性
+
+属性名 | 类型 | 默认值 | 说明
+--------|------|------|------
+col | Number | 2 | 列表分栏数量，`不可动态修改`
+imageWidth | Number | 305 | 列表中图片渲染的真是rpx单位的宽度，`不可动态修改`，305是示例列表的图片渲染宽度
+imageKey | String | url | 数据中图片的key值，默认为`url`
+hideList | Boolean | false | 是否隐藏列表，可隐藏列表部分来展示更多的提示内容(如：空列表时)
+cacheImageHeight | Boolean | true | 是否缓存图片高度，能减少图片信息的加载过程提高渲染效率。
+
+#### 方法 
+- 源码演示
+
+```javascript
+// 组件绑定 ref
+<waterfall ref="helangWaterfall">...</waterfall>
+
+// 通过 ref 调用组件中的方案
+// 渲染
+this.$refs.helangWaterfall.render(数据Array,是否重绘Boolean);
+// 上报当前高度
+this.$refs.helangWaterfall.reportHeight(栏目序号Number,高度Number);
+```
+- 详细说明
+
+方法名称 | 参数 | 说明
+--------|------|------
+render | (数据Array,是否重绘Boolean) | 开启瀑布流渲染
+reportHeight | (栏目序号Number,高度Number) | 汇报当前项的渲染高度，数据从`<waterfall-item @height="onRenderHeight">` 获取
+
+#### 事件
+事件名称 | 参数 | 说明
+--------|------|------
+@statusChange | (渲染状态值String) | 监听瀑布流组件的渲染状态，状态有:`RENDER_LOADING(加载中)`、`RENDER_START(渲染开始)`、`RENDER_END(渲染结束)`，可让业务代码配合拦截部分操作减少渲染过程中的BUG发生
+
+### 分栏组件 waterfall-col
+
+####  属性
+
+属性名 | 类型 | 默认值 | 说明
+--------|------|------|------
+colWidth | String | '' | 栏目宽度，数据来源于 `waterfall-lsit` 的插槽透传的`colWidth`属性
+
+### 内容组件 waterfall-item
+
+####  属性
+
+属性名 | 类型 | 默认值 | 说明
+--------|------|------|------
+colIndex | Number | 0 | 栏目索引，用于汇报渲染高度时使用
+
+####  事件
+
+方法名 | 回调参数 | 说明
+--------|------|------
+@height | ({colIndex, height}) | 监听当前内容渲染后的高度，`colIndex`:栏目索引、`height`:渲染的高度值
+
+## 常见问题解答
+
+### 1. 列表渲染速度太慢，怎么优化？
+
+瀑布流布局最大的难点是在于图片加载是一个异步的过程，所以本插件也是利用了图片加载这个事件来触发组件初始化完成的。为了更好的加载体验和降低用户的用户的流量消耗，推荐使用`缩略图`来做为列表中的显示（也应当这么做，不只是在瀑布流布局中），这也是做好一个产品最基本的优化要求。
+
+## 友情提示：
+1. 当前项目源码使用了 ES6 和 scss 请添加运行依赖
+2. [插件ZIP]只包含模板文件和数据文件，不包含项目运行依赖（如 pages.json）
+3. [示例项目ZIP]是完整的项目文件，可下载后导入 HBuilderX 中直接运行体验
+4. 文件下载在当前页面的上部靠右位置，有 [下载插件ZIP] [下载示例项目ZIP] 按钮，点击即可下载
\ No newline at end of file
diff --git "a/\346\226\207\346\241\243/\347\200\221\345\270\203\346\265\201.md" "b/\346\226\207\346\241\243/\347\200\221\345\270\203\346\265\201.md"
deleted file mode 100644
index b18556a..0000000
--- "a/\346\226\207\346\241\243/\347\200\221\345\270\203\346\265\201.md"
+++ /dev/null
@@ -1,102 +0,0 @@
-## 插件简介
-
-> 这是一款简单又好用的瀑布流布局模板，通过页面模板+组件的方式。充分利用组件的复用性和页面的生命周期。为了更好的兼容和更高的性能消耗，所以不采用多重自定义组件嵌套。
-
-#### <font color="red">源码中有详细的注释，请各位开发者按个人需求自行修改。</font>
-
-### <font color="red">对使用有疑问，可以先导入 [示例项目] 学习 页面与组件的使用流程</font>
-
-### 瀑布流组件的渲染触发条件是什么？
-
-#### 瀑布流组件的渲染触发情况有2种
-
-1. 控制瀑布流的渲染条件是 `status` 属性，当 `status="success"` 时，组件将会开始计算布局，计算完成后渲染列表效果。切记，需要触发渲染，需要将 `status` 设置为 `success` ，并且是由 非 `success` 转为 `success`。
-2. 如果组件在创建时， `status` 属性是 `success`，并且 `list` 属性的数据长度大于 0。
-
-
-## 下载&体验
-
-#### H5在线版 [点我预览](https://mydarling.gitee.io/uniapp-extend/#/uni_modules/helang-waterfall/pages/waterfall/waterfall)
-
-## 常见问题解答
-
-#### 1. 如何定义瀑布流的样式和内容？
-
-修改 `waterfall-item.vue` 这个子组件的 `CSS`样式和绑定的数据字段名称即可。 
-
-#### 2. 列表渲染速度太慢，怎么优化？
-
-瀑布流布局最大的难点是在于图片加载是一个异步的过程，所以本插件也是利用了图片加载这个事件来触发组件初始化完成的。为了更好的加载体验和降低用户的用户的流量消耗，推荐使用`缩略图`来做为列表中的显示（也应当这么做，不只是在瀑布流布局中），这也是做好一个产品最基本的优化要求。
-
-#### 3. 有多个不同样式的瀑布流组件需求
-
-可以将组件多复制几份，按不同的需求修改。也可以通过自动扩展 `waterfall-list`组件属性，来实现多个`waterfall-item` 子组件的切换。
-
-#### 4. 列表没有图片又想用这个插件
-
-子组件的高度计算是由`<image>`图片组件的 `@load` 事件触发后上报的，如果是不需要图片的话可以提供一张 `1px*1px`的透明图片来保留现有的上报逻辑，也可以自行修改源码（不会改也别来问我，自己选的路就自己走）。
-
-## 组件引用
-
-### 组件的使用示例代码较多，建议下载 示例项目体验。详情见 waterfall.vue 文件
-
-### waterfall-list 插槽
-名称 | 说明
---------|------|------
-default | 可往组件内插入自定义内容，常用于显示组件不同状态下的提示内容。可参考示例项目
-
-### waterfall-list 组件属性说明
-
-属性名 | 类型 | 说明
---------|------|------
-status | String | 组件状态，默认`空字符串`,可选值看下方 `status` 属性说明
-list | Array | 待渲染的数据，默认值`[]`
-reset | Boolean | 重置列表，默认值`false`，设置为 true 时，瀑布流在渲染时会清除之前的列表内容
-
-### waterfall-list 组件 status 属性说明
-
-属性值 | 说明
---------|------
-await | 等待加载
-loading | 等待加载
-success | 加载成功
-finish | 加载结束
-fail | 加载失败，该状态下组件不展示列表内容
-empty | 内容为空，该状态下组件不展示列表内容
-
-### waterfall-list 组件方法说明
-
-方法名 | 回调参数 | 说明
---------|------|------
-@click | `(data, index, tag)` | 点击事件 <br/> data：被点击的项目数据 <br/> index：被点击的项目序号 <br/> tag：被点击的项目标记
-@done | `()` | 瀑布流渲染完成事件，无返回参数
-
-
-### <font color="red">waterfall-item 组件 是用于渲染列表的整体效果项，使用时自行修改该组件的 CSS 和 绑定的数据属性</font>
-
-### waterfall-item 组件属性说明
-
-- <font color="red">waterfall-item 组件属性说明 可以不需要阅读，一般使用都是不需要修改的</font>
-
-属性名 | 类型 | 说明
---------|------|------
-params | Object | 组件内容参数，具体值自行按页面内容要求编写
-index | Number | 组件序号，为点击事件等需要返回当前序号使用
-tag | String / Number | 组件标记，为区别是左侧还是右侧列表使用
-
-
-### waterfall-item 组件方法说明
-
-- <font color="red">waterfall-item 组件方法说明 可以不需要阅读，一般使用都是不需要修改的</font>
-
-方法名 | 必填 | 说明
---------|------|------
-@height | 是 | 用于接收当前组件的高度，是瀑布流计算优先插入那一边的核心
-@click | 否 | 当组件被点击时触发，返回当前组件的 `index` 和 `tag` 值
-
-
-#### 友情提示：
-1. 当前项目源码使用了 ES6 和 scss 请添加运行依赖
-2. [插件ZIP]只包含模板文件和数据文件，不包含项目运行依赖（如 pages.json）
-3. [示例项目ZIP]是完整的项目文件，可下载后导入 HBuilderX 中直接运行体验
-4. 文件下载在当前页面的上部靠右位置，有 [下载插件ZIP] [下载示例项目ZIP] 按钮，点击即可下载
\ No newline at end of file
-- 
Gitee