# WaterfallFlow

**Repository Path**: ceclear/waterfall-flow

## Basic Information

- **Project Name**: WaterfallFlow
- **Description**: uniapp 瀑布流组件，持续更新...
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 2
- **Created**: 2024-03-27
- **Last Updated**: 2024-03-27

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

瀑布流组件迎来第一个开源版本，它是基于uniapp写的，欢迎大家前来捧场！！！ :grin:  作者微信：toby_8

# 第一个组件waterfall-flow1
其 实现方式是 根据加载的图片计算高度后动态的设置元素所在位置，所有元素均被设为position: absolute;

### 在父组件中使用
```
<waterfall-flow1 :list="list" ref="myWaterfallFlow" @load="load" @clickImage="clickImage" @clickItem="clickItem">
	<view class="item" v-for="(item, index) in list" :key="index" slot="slot{{index}}">
		<view>{{ item.text }}</view>
	</view>
</waterfall-flow1>
```
* 由于要在组件中获取图片的高度，所以waterfall-flow1组件的slot不用再放置image标签
* 瀑布流组件接收的参数：
	<br />@Props list Array : 瀑布流的列表数据，默认为空数组
	<br />@Props offset Number : 元素之间的间隙，单位为 px，默认为10
	<br />@Props idKey String : 用于组件绑定查询依据，它必须是唯一的值，默认为'id'
	<br />@Props imageSrcKey String : 用于显示图片的src字段，默认为'image'
	<br />@Props imageStyle Object : 用于修饰图片的样式，接收标准的css键值对，默认为空对象
	<br />@Props boxStyle Object : 用于修饰每个元素盒子的样式，接收标准的css键值对，默认为空对象
	<br />@Props single Boolean : 是否只显示图片，控制显示圆角，如果只显示图片就会有8rpx的图片圆角，默认为false
	
* 瀑布流组件向外导出的事件：
	<br />@Event load Params { total: Number 统计当前瀑布流渲染条数, colHeight: Array<number> 记录着列高数据 } 组件渲染完毕触发
	<br />@Event clickItem Params { item: Object 当前点击项的数据, index: Number 当前点击项的下标 } 点击列表项时触发
	<br />@Event clickImage Params { item: Object 当前点击图片的数据, index: Number 当前点击图片的下标 } 点击列表的图片时触发
	
* 瀑布流组件向外导出的方法：
	<br />@Methods clear 清除数据，用于重新渲染，当数组被置空重新赋值时调用，例如下拉刷新等等
	<br />@Methods update 迫使组件重新渲染，调用后整个列表将重新渲染，例如排序等等场景
	
	
<hr />

	
# 第二个组件waterfall-flow2
其 实现方式是 将列表拆分成左右两列的数组，然后在追加数据时，获取两个的高度，哪个矮一点我就加到哪个数组里

### 在父组件中使用（写法参考了uView 1.x版本的瀑布流写法）
```
<!-- HTML -->
<waterfall-flow2 :list="list" offset="10rpx" ref="myWaterfallFlow" @load="waterfallFlowLoad">
	<template v-slot:left="{leftList}">
		<view class="demo-warter" v-for="(item, index) in leftList" :key="index" @click="clickItem(item)">
			<!-- 这里的image标签必须加mode="widthFix"属性，让其自适应高度 -->
			<image :src="item.url" mode="widthFix" :lazy-load="true"></image>
			<view>{{ item.title }}</view>
		</view>
	</template>
	<template v-slot:right="{rightList}">
		<view class="demo-warter" v-for="(item, index) in rightList" :key="index" @click="clickItem(item)">
			<image :src="item.url" mode="widthFix" :lazy-load="true"></image>
			<view>{{ item.title }}</view>
		</view>
	</template>
</waterfall-flow2>

<!-- css -->
.demo-warter{
	width: 100%; // 此为必须，让其容器自适应组件动态分配的宽度
	height: auto; // 除了不能设置固定值，其他皆可，通常设为auto就好了
	background-color: #ffaaff; // 盒子的背景色...
	border-radius: 10rpx; // 盒子圆角...
	overflow: hidden; // 用于显示圆角效果的...
	// 更多样式优化自行添加...
}
.demo-warter:nth-child(n+2){
	margin-top: 10rpx; // 元素的上边距，从第二个元素开始出现10rpx，不设置它们将会挨在一起
}
.demo-warter image{
	width: 100%; // 此为必须，必须将图片的宽度设为100%，好让它自适应父容器显示
}
```
* 瀑布流组件接收的参数：
	<br />@Props list Array : 瀑布流的列表数据，默认为空数组
	<br />@Props offsetW String : offsetW => offset Within 外边距，两个元素的中间边距，默认有10rpx
	<br />@Props offsetO String : offsetO => offset Outside 外边距，两个元素的最外边边距，没有没有边距 空字符串
	<br />@Props offset String : 这个就厉害了，offset 是offsetW和offsetO的简写，也就是同时包含最外边的边距和元素之间的间距，传有这个属性不为空时offsetW和offsetO将不生效，默认为 空字符串
	
* 瀑布流组件向外导出的事件：
	<br />@Event load Params { total: Number 统计当前瀑布流渲染条数, leftList: Array 左边部分渲染的列表, rightList: Array 右边部分渲染的列表 } 组件渲染完毕触发
	
* 瀑布流组件向外导出的方法：
	<br />@Methods clear 清除数据，用于重新渲染，当数组被置空重新赋值时调用，例如下拉刷新等等
	<br />@Methods update 迫使组件重新渲染，调用后整个列表将重新渲染，例如排序等等场景


<hr />
<p style="text-align: center;">总结</p>
可以看出，第二个组件更加简洁，在dom上也更加的灵活，这是两种获取高度方式不同的写法区别之处，理论上来说第二个BUG更少，性能也更好。
全是个人之见，大佬勿喷，本人还在继续学习当中，也写了其他很实用的组件cli，后续将会开放出来。。。