uni-app 状态栏大全-状态栏透明(沉浸式)、变色及全屏的区别

在uni-app中，状态栏的处理涉及到沉浸式、透明、变色以及全屏等概念。下面将通过代码案例展示这些特性的实现方式。

1. 状态栏透明（沉浸式）

沉浸式状态栏通常意味着状态栏和内容区域颜色一致，且状态栏透明，使得内容可以延伸到状态栏下方。

// 在pages.json中设置
{
  "globalStyle": {
    "navigationStyle": "custom", // 自定义导航栏
    "statusBarStyle": "light", // 状态栏文字颜色为浅色
    "app-plus": {
      "titleNView": false, // 隐藏原生导航栏
      "autoBackButton": false // 隐藏返回按钮
    }
  }
}

// 在页面的onLoad生命周期中设置状态栏高度
onLoad() {
  const statusBarHeight = uni.getSystemInfoSync().statusBarHeight;
  this.setData({
    statusBarHeight
  });
  // 可以通过设置页面的padding-top来实现内容不被状态栏遮挡
}

2. 状态栏变色

状态栏变色通常指改变状态栏的背景颜色，同时可能需要调整状态栏文字颜色以适应背景色。

// 在pages.json中设置
{
  "globalStyle": {
    "navigationBarBackgroundColor": "#FF0000", // 设置导航栏背景色（状态栏颜色跟随）
    "navigationBarTextStyle": "white", // 设置导航栏标题颜色（状态栏文字颜色跟随）
    "navigationStyle": "default" // 使用默认导航栏（状态栏跟随导航栏设置）
  }
}

3. 全屏显示

全屏显示意味着应用内容占据整个屏幕，包括状态栏和导航栏区域。这通常用于游戏或视频类应用。

// 在pages.json中设置
{
  "globalStyle": {
    "navigationStyle": "custom", // 自定义导航栏以实现全屏
    "app-plus": {
      "titleNView": false, // 隐藏原生导航栏
      "autoBackButton": false, // 隐藏返回按钮
      "fullscreen": true // 开启全屏显示
    }
  }
}

// 需要注意的是，全屏显示在H5端可能不适用，需要在App端或小程序端测试效果

总结

上述代码展示了如何在uni-app中实现状态栏透明（沉浸式）、变色以及全屏显示的方法。通过配置pages.json文件中的globalStyle属性，可以灵活地控制应用的状态栏行为。需要注意的是，不同平台的实现可能有所差异，因此在实际开发中应进行充分的测试和调整。此外，对于状态栏高度的处理，可以通过获取系统信息中的statusBarHeight来实现内容的正确布局。