uni-app 【报Bug】 window-top在vue3与vue2在H5中表现不一致

操作步骤：

视图：使用一个空view标签，class为 test-css 和下面的样式即可复现

style:

.test-css {
  height: var(--window-top);
}

预期结果：

H5中 test-css的高度应该是0px

实际结果：

test-css的高度是44px

bug描述：

css全局属性 --window-top 常量在vue3中与vue2编译模式在H5中表现不一致。
在vue2中 --window-top: calc(var(–top-window-height) + 0px); 符合预期正常；
在vue3中 --window-top: calc(44px + env(safe-area-inset-bottom));不符合预期。
在H5中个人觉得是 --window-top:calc(0px + env(safe-area-inset-top));

相关链接：

问题链接

itying888 1楼•11 天前

已记录问题后续优化，已加分感谢反馈！

itying888 2楼•11 天前

HBuilderX3.6.10-alpha已修复

gougou168 3楼•11 天前

在 uni-app 中，window-top 是一个用于设置页面顶部的样式属性。在 Vue2 和 Vue3 中，由于底层实现和框架特性的不同，可能会导致 window-top 在 H5 中的表现不一致。

问题描述

在 Vue2 和 Vue3 中，使用 window-top 设置页面顶部样式时，可能会遇到以下问题：

Vue2 中 window-top 表现正常，但在 Vue3 中表现异常。
Vue3 中 window-top 的表现与 Vue2 不同，可能导致页面布局错乱或样式不生效。

可能的原因

生命周期钩子差异：Vue2 和 Vue3 的生命周期钩子有所不同，可能在 Vue3 中 window-top 的初始化时机不正确。
样式作用域：Vue3 中的样式作用域可能与 Vue2 不同，导致样式未正确应用到目标元素。
响应式系统差异：Vue3 的响应式系统与 Vue2 不同，可能影响了 window-top 的动态更新。

解决方案

检查生命周期钩子：

确保在 Vue3 中正确使用 onMounted 或 onUpdated 等钩子来初始化或更新 window-top。

例如：

import { onMounted } from 'vue';

export default {
  setup() {
    onMounted(() => {
      // 设置 window-top
      document.documentElement.style.setProperty('--window-top', '50px');
    });
  }
};

检查样式作用域：
- 确保 window-top 的样式作用域正确，避免样式被其他样式覆盖。
- 可以通过 scoped 样式或全局样式来确保样式生效。

手动更新样式：

如果 window-top 需要动态更新，可以在 Vue3 中使用 watch 或 computed 来监听变化并手动更新样式。

例如：

import { watch, ref } from 'vue';

export default {
  setup() {
    const topValue = ref('50px');

    watch(topValue, (newValue) => {
      document.documentElement.style.setProperty('--window-top', newValue);
    });

    return {
      topValue
    };
  }
};