uni-app vue3模式 页面内容没有一屏 页面可以滚动

uni-app vue3模式 页面内容没有一屏 页面可以滚动

开发环境 版本号 项目创建方式
Mac macOS 12.0.1 HBuilderX 
### 操作步骤：
切换到vue3版本，设置"navigationStyle": "custom"，安装uni-app(vue3)插件，重新启动编译

### 预期结果：
页面内容没有超过一屏，按理说不可能有滚动条

### 实际结果：
页面内容没有超过一屏，页面可以滚动（发现是状态栏和安全区的高度）

### bug描述：

![](https://www.itying.com/uniimg.php?url=https://img-cdn-tc.dcloud.net.cn/uploads/questions/20211203/52720decf6b8295c82ffe404da387dc4.png)
![](https://www.itying.com/uniimg.php?url=https://img-cdn-tc.dcloud.net.cn/uploads/questions/20211203/d248e8b078c88067e3157db3b7e9043b.png)

更多关于uni-app vue3模式 页面内容没有一屏 页面可以滚动的实战教程也可以访问 https://www.itying.com/category-93-b0.html

3 回复

vue2版本是否正常？

更多关于uni-app vue3模式 页面内容没有一屏 页面可以滚动的实战教程也可以访问 https://www.itying.com/category-93-b0.html


vue2版本正常

在 uni-app 的 Vue3 模式下，当设置 "navigationStyle": "custom" 时，页面默认会包含状态栏和安全区域的高度，导致页面内容即使未满一屏也可能出现滚动。这是因为自定义导航栏后，页面布局的起始位置从屏幕顶部开始，而状态栏和安全区域占用了额外空间。

解决方案：

  1. 使用 CSS 修复：为页面根元素添加 padding-top，值可通过 uni.getSystemInfoSync().statusBarHeight 获取状态栏高度，并加上安全区域偏移（如需要）。例如：
    page {
  padding-top: calc(var(--status-bar-height) + 安全区域偏移);
}
回到顶部