209 lines
3.8 KiB
Vue
209 lines
3.8 KiB
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> |