关于uni-ui组件的高度获取

该问题请在专业群（ uni-ui官方技术交流群 ） 咨询，群中有相关专业的管理员和群友。

在 Vue3 + setup 语法糖 + TS 的写法里，uni-nav-bar 把 height 设为 0 且 fixed="true" 时，组件内部会自动计算一个实际高度，但这个高度不会通过 props 或事件暴露。要想在页面里拿到这个“最终渲染出来的高度”，只能等组件渲染完成后自己去量。推荐做法如下，完全兼容您当前的技术栈：

1. 给 uni-nav-bar 加一个 ref
2. 在 onMounted（或 nextTick）里通过 uni.createSelectorQuery 读取它的高度
3. 把结果存到一个响应式变量里，后续页面布局就可以动态使用

示例代码：

<template>  
  <!-- height 设为 0 让组件自己算 -->  
  <uni-nav-bar  
    ref="navBar"  
    fixed  
    :height="0"  
    title="首页"  
  />  
</template>  

<script setup lang="ts">  
import { ref, onMounted, nextTick, getCurrentInstance } from 'vue'  

// 导航栏实际高度  
const navBarHeight = ref(0)  
const navBar = ref<InstanceType<typeof UniNavBar>>()  

onMounted(async () => {  
  // 等 DOM 渲染完  
  await nextTick()  

  // 创建查询  
  const query = uni.createSelectorQuery().in(getCurrentInstance())  
  query  
    .select('.uni-nav-bar')   // uni-nav-bar 渲染后的根节点 class  
    .boundingClientRect((rect: any) => {  
      if (rect) {  
        navBarHeight.value = rect.height  
        console.log('导航栏实际高度：', navBarHeight.value)  
      }  
    })  
    .exec()  
})  
</script>

要点说明

• 组件根节点 class 固定为 .uni-nav-bar，所以直接 select('.uni-nav-bar') 即可。
• 如果页面里可能同时出现多个 uni-nav-bar，可再包一层 id 或 class 做区分。
• 拿到的高度单位是 px，可直接用于计算页面主体 padding-top 或定位。