当前位置:   article > 正文

uniapp 获取自定义组件的高度

uniapp 获取自定义组件的高度

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

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

  1. <template>
  2. <view>
  3. <tab-bars ref="tabBars" :choose_index="2"></tab-bars>
  4. </view>
  5. </template>

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

  1. <script>
  2. export default {
  3. mounted() {
  4. this.$nextTick(() => {
  5. uni.createSelectorQuery().in(this.$refs.tabBars)
  6. .select('.tab-bars')
  7. .boundingClientRect((res) => {
  8. console.log('自定义组件的高度:', res.height);
  9. })
  10. .exec();
  11. });
  12. },
  13. };
  14. </script>

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

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

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/正经夜光杯/article/detail/844829
推荐阅读
相关标签
  

闽ICP备14008679号