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>



















