uniapp获取窗口高度
时间: 2025-06-19 21:36:49 浏览: 12
### 获取 UniApp 窗口高度的方法
在 UniApp 中,可以通过调用 `uni.getSystemInfoSync()` 或 `uni.getSystemInfo()` 方法来获取窗口的高度。这些方法返回的对象中包含多个与屏幕和窗口相关的属性,例如 `windowHeight` 和 `windowWidth`,分别表示可使用窗口的高度和宽度。
以下是一个完整的代码示例,展示如何动态获取并设置窗口高度:
```javascript
export default {
data() {
return {
pageHeight: 0, // 当前页面高度
};
},
onLoad() {
// 使用同步方法获取系统信息
const systemInfo = uni.getSystemInfoSync();
this.pageHeight = systemInfo.windowHeight; // 设置窗口高度[^1]
// 监听窗口大小变化
uni.onWindowResize((res) => {
this.pageHeight = res.size.windowHeight; // 动态更新窗口高度[^1]
});
}
};
```
在模板部分,可以将获取到的窗口高度动态绑定到样式中:
```html
<view class="uni-content" :style="{ height: pageHeight + 'px' }">
<!-- 页面内容 -->
</view>
```
此外,也可以通过异步方式获取系统信息:
```javascript
uni.getSystemInfo({
success(res) {
this.pageHeight = res.windowHeight; // 异步获取窗口高度[^3]
}
});
```
如果需要获取某个特定区域的高度,可以结合 `uni.createSelectorQuery()` 使用:
```javascript
getRegionHeight() {
const query = uni.createSelectorQuery().in(this);
query.select(".target-region") // 替换为实际的类名或ID
.boundingClientRect((data) => {
console.log("目标区域高度:", data.height);
}).exec();
}
```
### 注意事项
- `windowHeight` 表示的是当前可用窗口的高度,不包括状态栏和导航栏的高度[^2]。
- 如果应用中有自定义导航栏或其他顶部组件,可能需要额外计算以确保高度准确[^4]。
- 在 H5 环境下,`windowHeight` 可能会受到浏览器地址栏的影响,因此建议监听 `onWindowResize` 事件以动态调整高度[^1]。
阅读全文
相关推荐


















