pad-app/pages/test.vue

<template>
	<view class="container">
		<view class="pb">
			<view class="left" id="leftElement">
				<view class="item" v-for="(item, index) in leftList" :key="index" @click="addLeftEle(index)"
					:style="{'background-color':  item.style}">
					{{item.a}}
					<view class="ele" v-for="(ele, index2) in item.arr" :key="index">
						{{ele}}
					</view>
				</view>
			</view>
			<view class="right" id="rightElement">
				<view class="item" v-for="(item, index) in rightList" :key="index" @click="addRightEle(index)"
					:style="{'background-color':  item.style}">
					{{item.a}}
					<view class="ele" v-for="(ele, index2) in item.arr" :key="index">
						{{ele}}
					</view>
				</view>
			</view>
		</view>
		<button @click="toOne">1</button>
		<button @click="totne">2</button>
		<button @click="toYne">3</button>
	</view>
</template>

<script>
	import {
		mapActions
	} from 'vuex'
	export default {
		components: {

		},
		data() {
			return {
				leftHeight: 0,
				rightHeight: 0,
				list: [{
						a: 1,
						style: 'red',
						height: '33rpx',
						arr: [1, 2, 3, 4, 5]
					},
					{
						a: 2,
						style: 'blue',
						height: '66rpx',
						arr: [1, 2, 3, 4, 5]
					},
					{
						a: 3,
						style: 'green',
						height: '44rpx',
						arr: [1, 2, 3, 4, 5]
					},
					{
						a: 4,
						style: 'yellow',
						height: '81rpx',
						arr: [1, 2, 3, 4, 5]
					},
					{
						a: 5,
						style: 'yellow',
						height: '41rpx',
						arr: [1, 2, 3, 4, 5]
					},
					{
						a: 6,
						style: 'red',
						height: '101rpx',
						arr: [1, 2, 3, 4, 5]
					},
					{
						a: 7,
						style: 'yellow',
						height: '191rpx',
						arr: [1, 2, 3, 4, 5]
					},
					{
						a: 8,
						style: 'red',
						height: '151rpx',
						arr: [1, 2, 3, 4, 5]
					},
					{
						a: 9,
						style: 'yellow',
						height: '201rpx',
						arr: [1, 2, 3, 4, 5]
					}
				],
				leftList: [],
				rightList: []
			}
		},
		onLoad(e) {
			this.loadItem()
		},
		onShow() {

		},

		methods: {
			...mapActions([
				'majax',
				'najax',
				'jajax',
				'goout'
			]),
			async loadItem() {
				// this.list.forEach(item => {
				// 	this.addItem(item)
				// })
				for (let i = 0; i < this.list.length; i++) {
					await this.addItem(this.list[i])
				}
			},
			toOne() {
				let item = {
					a: 11,
					style: 'red',
					height: '333rpx',
					arr: [1, 2]
				}
				this.addItem(item)
			},
			totne() {
				let item = {
					a: 22,
					style: 'blue',
					height: '133rpx',
					arr: [1]
				}
				this.addItem(item)
			},
			async addItem(item) {
				this.leftHeight = await this.getLeftHeight() + 132;
				this.rightHeight = await this.getRightHeight();
				console.log(this.leftHeight, this.rightHeight);
				if (this.leftHeight < this.rightHeight) {
					this.leftList.push(item)
				} else {
					this.rightList.push(item)
				}
			},
			addLeftEle(index) {
				this.leftList[index].arr.push('aaa')
			},
			addRightEle(index) {
				this.rightList[index].arr.push('hahaha')
			},

			async getLeftHeight() {
				return new Promise(resolve => {
					uni.createSelectorQuery()
						.select('#leftElement')
						.boundingClientRect((rect) => {
							if (rect) {
								const height = rect.height;
								resolve(height);
							}
						})
						.exec();
				});
			},
			async getRightHeight() {
				return new Promise(resolve => {
					uni.createSelectorQuery()
						.select('#rightElement')
						.boundingClientRect((rect) => {
							if (rect) {
								const height = rect.height;
								resolve(height);
							}
						})
						.exec();
				});
			}
		},
	}
</script>

<style lang="less" scoped>
	.pb {
		&:after {
			content: "";
			display: table;
			clear: both;
		}

		.left {
			width: 50%;
			float: left;
		}

		.right {
			width: 50%;
			float: right;
		}

		.item {
			text-align: center;
		}
	}
</style>