uni-app 索尼手机上沉浸式状态栏会自动隐藏

uni-app 索尼手机上沉浸式状态栏会自动隐藏

项目名称 产品分类 PC开发环境操作系统 PC开发环境操作系统版本号 手机系统 手机系统版本号 手机厂商 手机机型 页面类型 vue版本 打包方式 项目创建方式
无 uniapp/App Mac 11.6 Android Android 14 索尼 Xperia 1V vue vue2 云端 HBuilderX

示例代码：

"globalStyle": {  
    "navigationStyle": "custom",  
    "navigationBarTitleText": "",  
    "navigationBarTextStyle": "black",  
    "backgroundColor": "#FFFFFF",  
    "app-plus":{  
        "bounce":"none",  
        "softinputMode": "adjustResize",  
    },  
},

操作步骤：

  • 在索尼手机上安装使用沉浸式布局的应用

预期结果：

  • 在索尼手机上状态栏会显示出来

实际结果：

  • 在索尼手机上状态会隐藏

bug描述：

设置沉浸式状态栏，在国产手机上面显示都是正常的，但是在索尼手机上显示就有问题，状态栏会自动隐藏。手动从屏幕上边缘往下滑可以划出状态栏，但是过几秒就会自动隐藏。


更多关于uni-app 索尼手机上沉浸式状态栏会自动隐藏的实战教程也可以访问 https://www.itying.com/category-93-b0.html

2 回复

解决了嘛？

更多关于uni-app 索尼手机上沉浸式状态栏会自动隐藏的实战教程也可以访问 https://www.itying.com/category-93-b0.html


在 uni-app 中，实现沉浸式状态栏的效果通常是通过设置页面的样式或使用原生 API 来实现的。然而，在某些设备（如索尼手机）上，可能会出现沉浸式状态栏自动隐藏的情况。这通常是由于设备的系统行为或定制化 UI 导致的。

以下是一些可能的原因和解决方案：

1. 设备系统行为

索尼等安卓设备可能对沉浸式状态栏的处理方式有所不同，尤其是在某些系统版本或定制 ROM 中，状态栏可能会自动隐藏，尤其是在全屏模式下。

解决方案：

  • 检查设备的系统设置，确保没有启用全屏模式或隐藏状态栏的选项。
  • 在代码中动态监听状态栏的显示和隐藏事件，并在状态栏隐藏时重新触发沉浸式效果。

2. uni-app 的沉浸式状态栏配置

在 uni-app 中，可以通过以下方式设置沉浸式状态栏：

  • 在 pages.json 中配置 navigationBar 和 statusBar 样式。
  • 使用 uni.setNavigationBarColor 或 uni.setNavigationBarTitle 动态修改状态栏颜色。

示例代码：

// pages.json
{
  "pages": [
    {
      "path": "pages/index/index",
      "style": {
        "navigationBarTitleText": "首页",
        "navigationBarBackgroundColor": "#000000",
        "navigationBarTextStyle": "white",
        "statusBarBackgroundColor": "#000000",
        "statusBarTextStyle": "white",
        "app-plus": {
          "statusbar": {
            "immersed": true
          }
        }
      }
    }
  ]
}

动态设置状态栏颜色：

uni.setNavigationBarColor({
  frontColor: '#ffffff', // 文字颜色
  backgroundColor: '#000000' // 背景颜色
});

3. 全屏模式的影响

如果页面启用了全屏模式，状态栏可能会被隐藏。可以通过以下方式检查是否启用了全屏模式：

plus.navigator.isFullscreen(function(isFullscreen){
  console.log('是否全屏：', isFullscreen);
});

如果需要退出全屏模式，可以使用：

plus.navigator.setFullscreen(false);
回到顶部