uniapp动态获取列表中每个下标的高度赋值给另一个数组（完整代码附效果图）

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>