uniapp实现动态获取列表中每个下标的高度,赋值给另一个数组。
先看效果图:
完整代码:
<template><div class=""><div class="">我是A列表,我的高度不是固定的</div><div class="p_r"><div style="background-color: antiquewhite;" :style="{height:item+'px'}" v-for="(item, index) in parmsList":key="index" :id="'idItem' + index">高度模拟为{{item}},</div></div><div class="">我是B列表, 我的高度是获取A列表的</div><div class="p_r"><div style="background-color: cadetblue;" v-if="heights" :style="{height:item}" v-for="(item, index) in heights":key="index">{{item}}</div></div></div>
</template><script>export default {data() {return {parmsList: [],heights: '',}},async created() {this.parmsList = [100, 200, 220, 240, 300];this.heights = []setTimeout(() => {this.heights=[]this.parmsList.forEach((item, index) => {this.setRTableHeight2(index)});}, 500)},methods: {setRTableHeight2(index) {const refName = 'idItem' + index;const query = uni.createSelectorQuery().in(this);query.select(`#${refName}`).boundingClientRect((data) => {console.log('节点的高度为' + data.height);let hhh = data.height + 'px'this.heights[index] = hhh}).exec();},}}
</script><style>.p_r {display: flex;direction: row;}
</style>