uni-app vh单位突然不好用了

uni-app vh单位突然不好用了

操作步骤：

找上一个版本的代码，升级hbuilder之后就能再现

预期结果：

显示应该没有变化

实际结果：

高度控制都不好用了，写class，style height: 3vh 都不好用了。

bug描述：

原本上一个版本开发的uniapp，用vh单位做的控件显示在pc端，app端都没问题，但是升级到3.4.7之后，高度用vh都不好用了，所有控件都堆叠到一起了。

请尝试运行 Hello Uni-app 是否正常

更多关于uni-app vh单位突然不好用了的实战教程也可以访问 https://www.itying.com/category-93-b0.html

又测试了一下，不是高度不好使了，是margin或者padding的bottom不好使原来的view设置了高度6vh margin: 6vh 然后现在左右边距好用，下边距没了，让我误以为是高度不生效了

bupafengyu 3楼

在 uni-app 中使用 vh 单位时，如果突然发现 vh 单位不好用了，可能是由于以下几个原因导致的。你可以根据这些原因进行排查和修复：

1. 页面结构问题

原因：vh 单位是基于视口高度的百分比单位，如果父元素的高度没有正确设置，可能会导致 vh 单位失效。
解决方法：确保父元素的高度正确设置，或者直接使用 vh 单位在根元素上。

<template>
  <view style="height: 100vh;">
    <!-- 内容 -->
  </view>
</template>

2. CSS 样式冲突

原因：其他 CSS 样式可能覆盖了 vh 单位的效果，例如 height: auto 或 max-height 等。
解决方法：检查是否有其他样式影响了 vh 单位，确保 vh 单位没有被覆盖。

.my-element {
  height: 100vh !important; /* 使用 !important 确保优先级 */
}

3. 浏览器或环境问题

原因：某些浏览器或环境（如微信小程序、H5 等）对 vh 单位的支持可能存在差异。
解决方法：
- 在 H5 环境中，确保浏览器支持 vh 单位。
- 在小程序环境中，vh 单位可能不完全支持，可以尝试使用 rpx 或其他单位替代。

4. 动态内容导致高度变化

原因：如果页面内容动态变化（如加载更多数据），可能会导致 vh 单位计算不准确。
解决方法：使用 flex 布局或 calc 函数动态调整高度。

.my-element {
  height: calc(100vh - 50px); /* 动态调整高度 */
}

5. uni-app 版本问题

原因：某些 uni-app 版本可能存在兼容性问题，导致 vh 单位失效。
解决方法：更新 uni-app 到最新版本，或者检查是否有相关 issue 和修复方案。

6. 小程序环境下的特殊处理

原因：在小程序环境中，vh 单位可能无法正确计算，因为小程序的视口高度和 H5 不同。
解决方法：使用 uni.getSystemInfoSync() 获取屏幕高度，然后动态设置样式。

const systemInfo = uni.getSystemInfoSync();
const screenHeight = systemInfo.windowHeight;

// 动态设置高度
<view :style="{ height: `${screenHeight}px` }">
  <!-- 内容 -->
</view>

7. CSS 预处理器问题

原因：如果使用了 CSS 预处理器（如 Sass、Less），可能需要对 vh 单位进行特殊处理。
解决方法：确保预处理器正确解析 vh 单位。

.my-element {
  height: 100vh; /* 确保预处理器正确解析 */
}

8. 页面滚动问题

原因：如果页面有滚动条，vh 单位可能会受到滚动条的影响。
解决方法：使用 overflow: hidden 隐藏滚动条，或者使用 calc 函数调整高度。

.my-element {
  height: calc(100vh - 20px); /* 减去滚动条高度 */
}

回到顶部