minAPP-hyg/components/xi-waterfall/xi-waterfall.vue

<template>
	<view class="an_box">
		<view class="container dy_fx_row">
			<!-- 第一列 -->
			<view class="w_two" id="columnFirst">
				<view class="pu_item" @tap="goToDetail(item)" v-for="(item, index) in columnFirst" :key="index">
					<image :src="item.logo" mode="scaleToFill" class="pul_img" :class="item.type == 2932?'desc_pb_imgs':''"></image>
					<view class="desc_pb" :class="item.type == 2932?'desc_pb_title':''">{{ item.title }}</view>
					<view class="desc_pb desc_price" v-if="item.type == 2932">¥{{ item.jointime }}</view>
				</view>
			</view>
			<!-- 第二列 -->
			<view class="w_two" id="columnSecond">
				<view class="pu_item" @tap="goToDetail(item)" v-for="(item, index) in columnSecond" :key="index">
					<image :src="item.logo" mode="scaleToFill" class="pul_img" :class="item.type == 2932?'desc_pb_imgs':''"></image>
					<view class="desc_pb" :class="item.type == 2932?'desc_pb_title':''">{{ item.title }}</view>
					<view class="desc_pb desc_price" v-if="item.type == 2932">¥{{ item.jointime }}</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	props: {
		list: {
			type: Array,
			default: function () {
				return [];
			}
		}
	},
	data() {
		return {
			tempArray: [],
			columnFirst: [],
			columnSecond: [],
			columnFirstHeight: 0,
			columnSecondHeight: 0,
			switchInsert: true
		};
	},
	methods: {
		// 获取dom元素的高度
		async getDomHeight(selector) {
			return new Promise((resolve) => {
				let query = uni.createSelectorQuery().in(this);
				query
					.select(selector)
					.fields(
						{
							size: true
						},
						(data) => {
							resolve(data.height);
						}
					)
					.exec();
			});
		},
		//新增数据
		async insert() {
			//只有数组内有数据才执行
			if (this.tempArray.length > 0) {
				this.switchInsert = false;
				//获取每一列的高度
				let columnFirstHeight = await this.getDomHeight('#columnFirst');
				let columnSecondHeight = await this.getDomHeight('#columnSecond');
				//获取加入的数据
				let data = this.tempArray.splice(0, 1);
				if (columnFirstHeight == columnSecondHeight || columnFirstHeight < columnSecondHeight) {
					//当高度相对,或第一列小于其他列,数据加入到第一列
					this.columnFirst.push(data[0]);
				} else {
					//数据加入到第二列
					this.columnSecond.push(data[0]);
				}
				this.$nextTick(() => {
					//当数据渲染完毕后,可以进行添加,知道临时数据被添加完毕
					this.insert();
				});
			} else {
				this.switchInsert = true;
			}
		},
		//清除数组
		clear() {
			this.columnFirst = [];
			this.columnSecond = [];
			this.tempArray = [];
		},
		//外部调用,添加数据
		insertData(data) {
			this.tempArray = this.tempArray.concat(data);
			//新增数据
			if (this.switchInsert) {
				this.insert();
			}
		},
		goToDetail: function (item) {
			if (item.type == '2926') {
				uni.navigateTo({
					url: '/pages/feiyi/feiyidetail/feiyidetail?guid=' + item.guid
				});
			}
			if (item.type == '2932') {
				uni.navigateTo({
					url: '/sunPackIndex/feiyi/feiyidetail/feiyidetail?guid=' + item.guid
				});
			}
		}
	},
	watch: {
		list(newVal, oldVal) {
			//当监听到,数据有变化时
			if (newVal.length === 0) {
				//清空数据
				this.clear();
			} else if (newVal.length > 0) {
				//赋值给临时数组
				this.tempArray = this.tempArray.concat(newVal.slice(oldVal.length));
				//新增数据
				if (this.switchInsert) {
					this.insert();
				}
			}
		}
	},
	computed: {
		currentLength() {
			return this.columnFirst.length + this.columnSecond.length;
		}
	}
};
</script>

<style scoped>
.container {
	width: 100%;
	display: flex;
	align-items: flex-start;
}
.container .column {
	flex: 1;
}
.container .column .item image {
	width: 100%;
}
.desc_pb_title {
	padding: 0 20rpx;
	border-radius: 0 0 15rpx 15rpx;
	font-size: 30rpx;
	 overflow: hidden;
	    -webkit-line-clamp: 2;
	    text-overflow: ellipsis;
	    display: -webkit-box;
	    -webkit-box-orient: vertical;
}
.desc_price {
	color: crimson;
	font-size: 34rpx;
}
.desc_pb_imgs{
	height: 340rpx;
}
</style>