uniapp 获取自定义组件的高度

清音啊2024-07-18 21:17

在 UniApp 中，要获取自定义组件的高度，可以使用uni.createSelectorQuery()方法结合res.node和res.height来实现。

首先，在父组件的代码中，给自定义组件添加一个 ref 属性，例如：

html 复制代码

<template>
  <view>
    <tab-bars ref="tabBars" :choose_index="2"></tab-bars>
  </view>
</template>

然后，在父组件的 mounted 钩子函数中，使用 uni.createSelectorQuery() 来获取自定义组件的高度，如下所示：

javascript 复制代码

<script>
export default {
  mounted() {
    this.$nextTick(() => {
      uni.createSelectorQuery().in(this.$refs.tabBars)
        .select('.tab-bars')
        .boundingClientRect((res) => {
          console.log('自定义组件的高度：', res.height);
        })
        .exec();
    });
  },
};
</script>

上述代码中，uni.createSelectorQuery() 用于创建查询对象，in(this.$refs.tabBars) 用于指定查询的节点为自定义组件（通过ref属性获取），.select('.tab-bars') 用于选择自定义组件的类名为 .tab-bars 的节点，.boundingClientRect() 用于获取该节点的位置和尺寸信息。最后，通过 .exec() 执行查询操作，并在回调函数中获取自定义组件的高度。

***请确保 .tab-bars 是自定义组件的类名，根据实际情况进行调整。***