uniapp手机状态栏穿透如何实现

在uniapp开发中，如何实现手机状态栏的穿透效果？目前页面内容会被状态栏遮挡，希望让内容延伸到状态栏区域，达到沉浸式效果。请问需要配置哪些参数或使用什么方法？

2 回复

在pages.json中设置当前页面的style：

"style": {
  "navigationBarTitleText": "页面标题",
  "app-plus": {
    "statusbar": {
      "immersed": true
    }
  }
}

这样状态栏就会与页面内容重叠，实现穿透效果。


在 UniApp 中实现状态栏穿透（沉浸式状态栏）可以通过以下步骤完成，适用于 Android 和 iOS 设备。以下是具体实现方法：

1. 配置页面样式

在页面的 <style> 标签中设置页面背景色，并确保状态栏区域透明：

page {
  background-color: transparent; /* 可选，根据需求调整 */
}

2. 使用 uni.getSystemInfoSync() 获取状态栏高度

在页面脚本中动态获取状态栏高度，并调整内容布局：

export default {
  data() {
    return {
      statusBarHeight: 0
    }
  },
  onLoad() {
    const systemInfo = uni.getSystemInfoSync();
    this.statusBarHeight = systemInfo.statusBarHeight; // 获取状态栏高度（单位：px）
  }
}

3. 调整页面布局

在模板中使用状态栏高度，为顶部内容添加内边距：

<template>
  <view class="container">
    <!-- 状态栏占位视图 -->
    <view :style="{ height: statusBarHeight + 'px' }"></view>
    <!-- 页面内容 -->
    <view class="content">你的页面内容</view>
  </view>
</template>

4. 设置全屏显示（可选）

在 pages.json 中配置页面样式，启用沉浸式状态栏：

{
  "pages": [
    {
      "path": "pages/index/index",
      "style": {
        "navigationBarTitleText": "首页",
        "navigationStyle": "custom", // 隐藏默认导航栏
        "enablePullDownRefresh": false // 根据需要调整
      }
    }
  ],
  "globalStyle": {
    "navigationBarTextStyle": "black", // 状态栏文字颜色
    "navigationBarTitleText": "App",
    "navigationBarBackgroundColor": "#ffffff" // 导航栏背景色
  }
}

注意事项：

  • Android 设置：部分 Android 设备可能需要额外配置 "app-plus" 在 pages.json 中：
    "app-plus": {
  "statusbar": {
    "immersed": true // 启用沉浸式状态栏
  }
}
  • iOS 适配：确保状态栏内容不与系统 UI 重叠，测试不同设备。
  • 兼容性：使用 uni.getSystemInfoSync() 保证高度准确。

完整示例代码：

<template>
  <view class="page">
    <view :style="{ height: statusBarHeight + 'px' }"></view>
    <view class="content">这里是页面主体内容</view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      statusBarHeight: 0
    };
  },
  onLoad() {
    const systemInfo = uni.getSystemInfoSync();
    this.statusBarHeight = systemInfo.statusBarHeight;
  }
};
</script>

<style>
.page {
  background-color: #f0f0f0; /* 根据设计调整 */
}
.content {
  padding: 20rpx;
}
</style>

通过以上步骤，即可在 UniApp 中实现状态栏穿透效果，让页面内容延伸到状态栏区域。如有问题，检查设备兼容性或查阅 UniApp 官方文档。

回到顶部