uni-app 开发小程序时获取内容页面高度报错

开发环境	版本号	项目创建方式
Windows	10	HBuilderX

产品分类：uniapp/App

PC开发环境操作系统：Windows

HBuilderX类型：正式

HBuilderX版本号：3.8.7

手机系统：iOS

手机系统版本号：iOS 17

手机厂商：苹果

手机机型：IPHONE12

页面类型：vue

vue版本：vue2

打包方式：云端

操作步骤：

const { windowHeight } = await uni.getSystemInfoSync();  
this.scrollViewHeight = windowHeight;

预期结果：

windowHeight 返回准确值

实际结果：

windowHeight 返回的值大于手机屏幕可编辑页面高度

bug描述：

uniapp 开发小程序如何获取内容页面的高度，指去除顶部固定的区域，和底部tabbar固定的区域。获取到windowHeight 包含哪些区域？
简单一点说，我需要准确获取除顶部导航栏和底部tabBar，中间可编辑页面在手机中的高度范围，动态适配各种机型。

vueper 1楼•7 天前

windowHeight是可使用窗口高度，视窗高度不受页面内容高度的影响。想要获取页面高度可使用节点查询获取，比如指定最外层元素id为page，以下方法可获取页面内容高度 const query = uni.createSelectorQuery().in(this);
query
.select("#page")
.boundingClientRect((data) => {
console.log(data.height)
})
.exec();

yibo5220 2楼•7 天前

在使用 uni-app 开发小程序时，获取内容页面高度时可能会遇到报错。常见的问题和解决方案如下：

1. 使用 `uni.createSelectorQuery()` 获取元素高度

在微信小程序中，可以使用 uni.createSelectorQuery() 来获取 DOM 元素的高度。以下是一个示例代码：

export default {
  methods: {
    getElementHeight() {
      uni.createSelectorQuery().select('.content').boundingClientRect(rect => {
        if (rect) {
          console.log('元素高度:', rect.height);
        } else {
          console.error('获取元素高度失败');
        }
      }).exec();
    }
  },
  mounted() {
    this.getElementHeight();
  }
}

注意：

select('.content') 中的 .content 是你要获取高度的元素的类名或 ID。
boundingClientRect 是获取元素的位置和尺寸信息的方法。
exec() 是执行查询的方法。

2. 确保元素已经渲染

如果你在页面加载时立即获取元素高度，可能会因为元素尚未渲染完成而导致获取失败。可以尝试在 mounted 或 onReady 生命周期钩子中获取高度，或者使用 setTimeout 延迟获取。

mounted() {
  setTimeout(() => {
    this.getElementHeight();
  }, 500); // 延迟500ms获取
}

3. 检查元素是否存在

如果元素不存在或选择器写错，也会导致获取失败。可以通过 console.log 或调试工具检查元素是否存在。

4. 处理异步问题

uni.createSelectorQuery() 是异步操作，确保在回调函数中处理获取到的数据。

5. 跨平台兼容性

uni-app 支持多平台开发，不同平台的 API 可能有所不同。如果你在多个平台上运行代码，建议使用条件编译来处理平台差异。

// #ifdef MP-WEIXIN
uni.createSelectorQuery().select('.content').boundingClientRect(rect => {
  console.log('微信小程序元素高度:', rect.height);
}).exec();
// #endif

6. 常见错误

Cannot read property 'boundingClientRect' of undefined: 通常是因为 uni.createSelectorQuery() 返回的查询对象为空，检查选择器是否正确。
rect is null: 元素可能尚未渲染或选择器错误，确保元素存在并正确渲染。

7. 使用 `uni.getSystemInfoSync()` 获取页面高度

如果你需要获取整个页面的高度，可以使用 uni.getSystemInfoSync() 获取系统信息，包括屏幕高度。

const systemInfo = uni.getSystemInfoSync();
console.log('屏幕高度:', systemInfo.windowHeight);