jewelry-front/uni_modules/uv-waterfall/components/uv-waterfall/uv-waterfall.vue

<template>
	<view class="uv-waterfall">
		<!-- #ifndef APP-NVUE -->
		<view class="uv-waterfall__gap_left" :style="[gapLeftStyle]"></view>
		<template v-if="columnNum>=1">
			<view id="uv-waterfall-1" class="uv-waterfall__column">
				<slot name="list1"></slot>
			</view>
		</template>
		<template v-if="columnNum>=2">
			<view class="uv-waterfall__gap_center" :style="[gapCenterStyle]"></view>
			<view id="uv-waterfall-2" class="uv-waterfall__column">
				<slot name="list2"></slot>
			</view>
		</template>
		<template v-if="columnNum>=3">
			<view class="uv-waterfall__gap_center" :style="[gapCenterStyle]"></view>
			<view id="uv-waterfall-3" class="uv-waterfall__column">
				<slot name="list3"></slot>
			</view>
		</template>
		<template v-if="columnNum>=4">
			<view class="uv-waterfall__gap_center" :style="[gapCenterStyle]">
			</view>
			<view id="uv-waterfall-4" class="uv-waterfall__column">
				<slot name="list4"></slot>
			</view>
		</template>
		<template v-if="columnNum>=5">
			<view class="uv-waterfall__gap_center" :style="[gapCenterStyle]">
			</view>
			<view id="uv-waterfall-5" class="uv-waterfall__column">
				<slot name="list5"></slot>
			</view>
		</template>
		<view class="uv-waterfall__gap_right" :style="[gapRightStyle]">
		</view>
		<!-- #endif -->
		<!-- #ifdef APP-NVUE -->
		<view class="waterfall-warapper">
			<waterfall :column-count="columnNum" :show-scrollbar="false" column-width="auto" :column-gap="columnGap" :left-gap="leftGap" :right-gap="rightGap" :always-scrollable-vertical="true" :style="[nvueWaterfallStyle]"
				@loadmore="scrolltolower">
				<slot></slot>
			</waterfall>
		</view>
		<!-- #endif -->
	</view>
</template>
<script>
	import mpMixin from '@/uni_modules/uv-ui-tools/libs/mixin/mpMixin.js'
	import mixin from '@/uni_modules/uv-ui-tools/libs/mixin/mixin.js'
	import props from './props.js';
	/**
	 * 瀑布流
	 * @description 该组件兼容所有端，nvue参考https://uniapp.dcloud.net.cn/component/waterfall.html
	 * @tutorial https://www.uvui.cn/components/list.html
	 * @property {Array}	value/modelValue	瀑布流数组数据，非nvue生效 （默认 [] ）
	 * @property {String}	idKey	  数据的id值，根据id值对数据执行删除操作，如数据为：{id: 1, name: 'uv-ui'}，那么该值设置为id，非nvue有效 （默认 '' ）
	 * @property {String ｜ Number}	addTime		每次插入数据的事件间隔，间隔越长能保证两列高度相近，但是用户体验不好，单位ms，非nvue生效（默认 200 ）
	 * @property {String ｜ Number}	columnCount		瀑布流的列数（默认 2 ）
	 * @property {String ｜ Number}			columnGap		列与列的间隙（默认 0 ）
	 * @property {String ｜ Number}			leftGap		左边和列表的间隙（默认 0 ）
	 * @property {String ｜ Number}			rightGap	右边和列表的间隙（默认 0 ）
	 * @property {Boolean}	showScrollbar		控制是否出现滚动条，仅nvue有效 （默认 false ）
	 * @property {String ｜ Number}		columnWidth		描述瀑布流每一列的列宽，nvue生效 （默认 auto）
	 * @property {String ｜ Number}	  width	  瀑布流的宽度，nvue生效 （默认 屏幕宽 ）
	 * @property {String ｜ Number}		height	 瀑布流的高度，nvue生效 （默认 屏幕高 ）
	 * @property {Object}	customStyle		定义需要用到的外部样式
	 *
	 * @example <uv-waterfall v-model="list"></uv-waterfall>
	 */
	export default {
		name: 'uv-waterfall',
		mixins: [mpMixin, mixin, props],
		data() {
			return {
				list1: [],
				list2: [],
				list3: [],
				list4: [],
				list5: [],
				// 临时列表
				tempList: []
			}
		},
		computed: {
			// 破坏value变量引用，否则数据会保持不变
			copyValue() {
				// #ifdef VUE2
				return this.$uv.deepClone(this.value)
				// #endif
				// #ifdef VUE3
				return this.$uv.deepClone(this.modelValue)
				// #endif
			},
			columnNum() {
				return this.columnCount <= 0 ? 0 : this.columnCount >= 5 ? 5 : this.columnCount;
			},
			gapLeftStyle() {
				const style = {}
				style.width = this.$uv.addUnit(this.leftGap)
				return style;
			},
			gapRightStyle() {
				const style = {}
				style.width = this.$uv.addUnit(this.rightGap)
				return style;
			},
			gapCenterStyle() {
				const style = {}
				style.width = this.$uv.addUnit(this.columnGap)
				return style;
			},
			nvueWaterfallStyle() {
				const style = {};
				if (this.width != 0) style.width = this.$uv.addUnit(this.width)
				if (this.height != 0) style.height = this.$uv.addUnit(this.height)
				// 如果没有定义列表高度，则默认使用屏幕高度
				if (!style.width) style.width = this.$uv.addUnit(this.$uv.sys().windowWidth, 'px')
				if (!style.height) style.height = this.$uv.addUnit(this.$uv.sys().windowHeight, 'px')
				return this.$uv.deepMerge(style, this.$uv.addStyle(this.customStyle))
			}
		},
		watch: {
			copyValue(nVal, oVal) {
				// #ifndef APP-NVUE
				if (nVal.length != 0) {
					// 取出数组发生变化的部分
					let startIndex = Array.isArray(oVal) && oVal.length > 0 ? oVal.length : 0
					// 拼接原有数据
					this.tempList = this.tempList.concat(this.$uv.deepClone(nVal.slice(startIndex)))
					this.splitData()
				}
				// #endif
			}
		},
		mounted() {
			// #ifndef APP-NVUE
			this.tempList = this.$uv.deepClone(this.copyValue)
			this.splitData()
			// #endif
		},
		methods: {
			// 滚动到底部触发事件
			scrolltolower(e) {
				this.$uv.sleep(30).then(() => {
					this.$emit('scrolltolower')
				})
			},
			// 拆分数据
			async splitData() {
				let rectArr = [];
				let emitList = {};
				if (!this.tempList.length) return
				for (let i = 1; i <= this.columnNum; i++) {
					const rect = await this.$uvGetRect(`#uv-waterfall-${i}`);
					rectArr.push({ ...rect, name: i });
				}
				let item = this.tempList[0]
				// 因为经过上面两个await节点查询和定时器，数组有可能会变成空[]，导致item的值为undefined
				// 解决多次快速滚动会导致数据乱的问题
				if (!item) return
				const minCol = this.getMin(rectArr);
				// 列宽可能使用的到
				item.width = minCol.width;
				this[`list${minCol.name}`].push(item);
				emitList.name = `list${minCol.name}`;
				emitList.value = item;
				this.$emit('changeList', emitList);
				// 移除临时数组中已处理的数据
				this.tempList.splice(0, 1)
				// 如果还有数据则继续执行
				if (this.tempList.length) {
					let _timeout = this.addTime;
					// 部分平台在延时较短的情况会出现BUG
					// #ifdef MP-BAIDU
					_timeout = _timeout < 200 ? 200 : _timeout;
					// #endif
					await this.$uv.sleep(_timeout);
					this.splitData()
				} else {
					this.$emit('finish')
				}
			},
			getMin(arr) {
				let result = null;
				const filter = arr.filter(item => item.height == 0);
				if (!filter.length) {
					const min = Math.min.apply(Math, arr.map(item => {
						return item.height;
					}))
					const [item] = arr.filter(item => item.height == min);
					result = item;
				} else {
					let newArr = [];
					arr.map((item, index) => {
						newArr.push({ len: this[`list${index+1}`].length, item: item });
					});
					const minLen = Math.min.apply(Math, newArr.map(item => {
						return item.len;
					}))
					try {
						const { item } = newArr.find(item => item.len == minLen && item.item.height == 0);
						result = item;
					} catch (e) {
						const { item } = newArr.find(item => item.item.height == 0);
						result = item;
					}
				}
				return result;
			},
			// 清空数据列表
			async clear() {
				// 清除数据
				for (let i = 0; i < this.columnCount; i++) {
					this[`list${i+1}`] = [];
				}
				// #ifdef VUE2
				this.$emit('input', [])
				// #endif
				// #ifdef VUE3
				this.$emit('update:modelValue', [])
				// #endif
				this.tempList = []
				await this.$uv.sleep(300);
				this.$emit('clear');
			},
			// 清除指定的某一条数据，根据id来实现
			remove(id) {
				let index = -1
				// 删除组件数据
				for (let i = 1; i <= this.columnCount; i++) {
					index = this[`list${i}`].findIndex(item => item[this.idKey] == id)
					if (index != -1) {
						this[`list${i}`].splice(index, 1)
					}
				}
				// 同时删除父组件对应的数据
				// #ifdef VUE2
				index = this.value.findIndex(item => item[this.idKey] == id)
				if (index != -1) this.$emit('input', this.value.splice(index, 1))
				// #endif
				// #ifdef VUE3
				index = this.modelValue.findIndex(item => item[this.idKey] == id)
				if (index != -1) this.$emit('update:modelValue', this.modelValue.splice(index, 1))
				// #endif
				this.$emit('remove', id);
			}
		}
	}
</script>
<style lang="scss" scoped>
	@import '@/uni_modules/uv-ui-tools/libs/css/components.scss';
	.uv-waterfall {
		@include flex(row);
		align-items: flex-start;
		&__column {
			@include flex(column);
			flex: 1;
			// #ifndef APP-NVUE
			height: auto;
			// #endif
		}
	}
</style>