hs_hzl_uniapp_ml/components/falls-list/index.vue

<template>
	<view>
		<view class="waterfall_left">
			<view class="waterfall_list" v-for="(item,index) in goodsLeftList" :key="index">
				<view class="waterfall_list_img">
					<u-image :src="item.goods_main_pic" mode="widthFix" @load="considerPush"></u-image>
				</view>
				<view class="msg-box">
					<view class="name single-omit">{{item.goods_name}}</view>
					<view class="price-box flex-align-center">
						<view class="unit"><text>￥</text>{{item.goods_sku.sku_sale_price}}</view>
					</view>
				</view>
			</view>
		</view>
		<view class="waterfall_right">
			<view class="waterfall_list" v-for="(item,index) in goodsRightList" :key="index">
				<view class="waterfall_list_img">
					<u-image :src="item.goods_main_pic" mode="widthFix" @load="considerPush"></u-image>
				</view>
				<view class="msg-box">
					<view class="name single-omit">{{item.goods_name}}</view>
					<view class="price-box flex-align-center">
						<view class="unit"><text>￥</text>{{item.goods_sku.sku_sale_price}}</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			list: {
				type: Array,
				required: true
			},
		},
		data() {
			return {
				// 左侧商品列表
				goodsLeftList: [],
				// 右侧商品列表
				goodsRightList: [],
				// 组件数据备份
				newList: [],
			}
		},
		created() {
			this.touchOff(); // 触发排列
		},
		mounted() {},
		watch: {
			list(newValue, oldValue) {
				this.touchOff()
			},
		},
		computed: {},
		methods: {
			// 触发重新排列
			touchOff() {
				this.newList = [...this.list];
				this.goodsLeftList = [];
				this.goodsRightList = [];
				if (this.newList.length != 0) {
					this.goodsLeftList.push(this.newList.shift()); //触发排列
				}

			},
			// 计算排列
			considerPush() {
				if (this.newList.length == 0) return; //没有数据了
				let leftH = 0,
					rightH = 0; //左右高度
				var query = uni.createSelectorQuery().in(this);
				query.selectAll('.waterfall_left').boundingClientRect()
				query.selectAll('.waterfall_right').boundingClientRect()
				query.exec(res => {
					leftH = res[0].length != 0 ? res[0][0].height : 0; //防止查询不到做个处理
					rightH = res[1].length != 0 ? res[1][0].height : 0;
					if (leftH == rightH || leftH < rightH) {
						// 相等 || 左边小  
						this.goodsLeftList.push(this.newList.shift());
					} else {
						// 右边小
						this.goodsRightList.push(this.newList.shift());
					}
				});
			},
		}
	}
</script>