uniapp 获取自定义组件的高度

在 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 是自定义组件的类名,根据实际情况进行调整。***

相关推荐
PedroQue994 小时前
0.8.2 新增 backFallback 配置,无 tabbar 页返回无忧
前端·uni-app
PedroQue999 小时前
v0.2.0 架构升级:class + reactive 重塑状态管理
前端·uni-app
CHB2 天前
别再问uni-app x蒸汽模式是否成熟了,已经有大量App案例上架应用商店了
uni-app
anyup4 天前
uView Pro X 1.0.0 发布:全面支持 uni-app x 蒸汽模式,80+ 组件
前端·uni-app·ai编程
zhongben123_4 天前
从零开发一个打车APP:技术选型、系统架构与成本评估指南
大数据·运维·ios·系统架构·uni-app·web app
天蒙蒙亮5 天前
打安卓apk包+“应用商城”发布
前端·uni-app
ModyQyW5 天前
vite-plugin-uni-pages 0.6:统一扫描规则,开发期少重启
前端·uni-app
Software攻城狮5 天前
【uniapp和普通web 端开发的区别】
前端·uni-app·notepad++
2501_915921435 天前
iOS 实时日志怎么看?KeyMob 的日志过滤、崩溃报告与符号化
android·ios·小程序·https·uni-app·iphone·webview
郑州光合科技余经理6 天前
同城小程序开发:同一笔单在用户端和商家端各显示到哪
android·java·开发语言·前端·后端·uni-app·php