uniapp er 设置高度ue

### 实现 UniApp 中动态设置元素高度的方法

在 UniApp 开发过程中，为了使应用能够更好地适配不同的设备屏幕尺寸，通常需要动态调整页面上某些元素的高度。一种常见的方式是在 `onLoad` 生命周期函数中通过 JavaScript 获取当前窗口的有效高度并据此计算目标组件所需的高度。

对于滚动列表这类场景而言，在页面加载时可以通过调用 `uni.getSystemInfoSync()` 方法来同步获得系统的相关信息，其中包括了可视区域的高度 (`windowHeight`) 。之后可以根据实际布局情况扣除掉不需要参与自动伸缩的部分（例如顶部导航栏或其他固定位置的内容），从而得到剩余可用于展示列表项的空间大小[^1]：

export default {
  data() {
    return {
      h: 0 // 存储最终计算出来的高度值
    };
  },
  onLoad() {
    let windowHeight = uni.getSystemInfoSync().windowHeight;
    let otherElementsHeight = uni.upx2px(810);
    this.h = windowHeight - otherElementsHeight;

    console.log(`Element height set to ${this.h}px`);
  }
}

另外还有一种方法适用于已经渲染完成后的 DOM 节点，即利用 Weex 提供的 API 来异步查询指定节点的实际尺寸。这里可以借助于 `$refs` 属性访问特定组件实例，并配合 `getComponentRect` 函数读取其边界矩形数据，进而更新状态变量以反映最新的测量结果[^2]:

<template>
  <view ref="leftMenu"></view> <!-- 假设这是要检测高度变化的目标 -->
</template>

<script>
import weex from 'weex'

export default {
  mounted () {
    const dom = weex.requireModule('dom')
    
    dom.getComponentRect(this.$refs.leftMenu, (option) => {
      this.rightMenuHeight = option.size.height
      
      console.log(`Detected element height as ${this.rightMenuHeight}px`)
    })
  }
}
</script>

这两种方式各有优劣，前者适合用于初始化阶段的一次性设定；而后者则更适合处理那些可能随时间推移发生改变的情况下的实时响应需求。