uni-app 安卓手机状态栏被顶出页面 状态栏bug
uni-app 安卓手机状态栏被顶出页面 状态栏bug
| 开发环境 | 版本号 | 项目创建方式 |
|----------|--------|--------------|
| Windows | win10 19043.1645 | HBuilderX |
产品分类：
uniapp/App
PC开发环境操作系统：
Windows
PC开发环境操作系统版本号：
win10 19043.1645
HBuilderX类型：
正式
HBuilderX版本号：
3.4.7
手机系统：
Android
手机系统版本号：
Android 10
手机厂商：
sony
手机机型：
xz2
页面类型：
vue
vue版本：
vue2
打包方式：
云端
操作步骤：
首页 设置了
“navigationStyle”: “custom”
.status_bar { height: var(–status-bar-height); width: 100%; } 其他安卓机型（华为mate40pro，红米k20pro等机型未发现该bug）
预期结果：
状态栏正常
实际结果：
状态栏被顶出页面外，从页面顶部下拉，状态栏显示，但app页面被顶出手机底部（整体下移一个状态栏高度，详见视频链接）
bug描述：
hbuilder 3.4.7更新后云打包出现bug，之前正常 （sony xz2 安卓10）状态栏被顶出页面外，从页面顶部下拉，状态栏显示，但app页面被顶出手机底部（整体下移一个状态栏高度，详见视频链接）
更多关于uni-app 安卓手机状态栏被顶出页面 状态栏bug的实战教程也可以访问 https://www.itying.com/category-93-b0.html
在 uni-app 开发中，安卓手机状态栏被顶出页面的问题通常是由于页面布局或样式设置不当导致的。以下是一些常见的解决方案和排查步骤：
1. 检查页面布局
确保页面的布局没有超出屏幕范围，特别是 position: fixed 或 position: absolute 的元素，可能会导致内容顶出状态栏。
2. 使用 uni-app 提供的状态栏高度
uni-app 提供了 uni.getSystemInfoSync() 方法，可以获取系统信息，包括状态栏高度。你可以在页面布局时考虑状态栏的高度，避免内容被顶出。
const systemInfo = uni.getSystemInfoSync();
const statusBarHeight = systemInfo.statusBarHeight || 0;
在页面布局中，可以使用 statusBarHeight 来设置顶部元素的 padding-top 或 margin-top，确保内容不会被状态栏遮挡。
<template>
<view :style="{ paddingTop: statusBarHeight + 'px' }">
<!-- 页面内容 -->
</view>
</template>
<script>
export default {
data() {
return {
statusBarHeight: 0
};
},
mounted() {
const systemInfo = uni.getSystemInfoSync();
this.statusBarHeight = systemInfo.statusBarHeight || 0;
}
};
</script>
3. 使用 uni-app 的 navigationBar 配置
如果你使用了 uni-app 的 navigationBar，可以通过配置 navigationBar 的 titleNView 来避免状态栏被顶出。
{
"pages": [
{
"path": "pages/index/index",
"style": {
"navigationBarTitleText": "首页",
"navigationBarTextStyle": "black",
"navigationBarBackgroundColor": "#ffffff",
"app-plus": {
"titleNView": {
"autoBackButton": true,
"buttons": []
}
}
}
}
]
}
4. 检查 manifest.json 配置
在 manifest.json 中，确保 app-plus 的 statusbar 配置正确。
{
"app-plus": {
"statusbar": {
"immersed": false
}
}
}
如果 immersed 设置为 true，可能会导致状态栏被内容顶出。可以尝试将其设置为 false。
5. 使用 uni-app 的 safe-area 组件
uni-app 提供了 safe-area 组件，可以帮助你处理安全区域的问题，避免内容被状态栏或底部导航栏遮挡。
<template>
<safe-area>
<!-- 页面内容 -->
</safe-area>
</template>
6. 检查 CSS 样式
确保你的 CSS 样式没有设置过大的 padding 或 margin，特别是 body 或 html 标签的样式。
body, html {
margin: 0;
padding: 0;
}
7. 使用 uni-app 的 page 样式
uni-app 的 page 样式默认会处理一些布局问题，确保你的页面使用了 page 样式。
page {
background-color: #ffffff;
padding: 0;
margin: 0;
}