uniapp 获取自定义组件的高度

在 UniApp 中,要获取自定义组件的高度,可以使用uni.createSelectorQuery()方法结合res.noderes.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 是自定义组件的类名,根据实际情况进行调整。***

相关推荐
白远山9 小时前
上海24小时自助健身房系统软件开发实战指南
java·架构·uni-app·需求分析
白远山1 天前
上海24小时自助健身房系统软件开发实战指南:从需求到部署
java·架构·uni-app·需求分析
海鸥两三2 天前
小程序文档预览 · 进阶面试题
小程序·uni-app·uniapp
海鸥两三2 天前
微信小程序 PDF 预览实践(uni.downloadFile → uni.openDocument)
小程序·uni-app
PedroQue992 天前
uni-app x 事件通信插件重磅上线
前端·uni-app
gnip2 天前
uni-app 原生插件
前端·javascript·uni-app
白远山3 天前
自助健身小程序源码:架构拆解、核心链路与本地部署实战
java·架构·uni-app·需求分析
2501_915909064 天前
怎么用 FlutterFlow 把应用发布到 App Store?
android·ios·小程序·https·uni-app·iphone·webview
2501_915918414 天前
怎么把 Python 写的 Flet 应用打包成 iOS App 并上架 App Store?
android·ios·小程序·https·uni-app·iphone·webview
Geek_Vison4 天前
小程序容器如何抹平系统差异,让一个小程序运行在 iOS、安卓、鸿蒙和电脑端
小程序·uni-app·harmonyos·mpaas