uniapp自定义顶部状态栏

### 实现 UniApp 自定义顶部状态栏

#### 取消默认的原生导航栏
为了自定义顶部状态栏，在 `pages.json` 文件中设置 `"navigationStyle": "custom"` 来取消默认的原生导航栏[^3]。

{
  "path": "pages/index/index",
  "style": {
    "navigationStyle": "custom"
  }
}

#### 获取系统信息并调整样式
通过调用 `uni.getSystemInfoSync()` 方法来获取设备的信息，特别是 `statusBarHeight` 和操作系统类型。这有助于根据不同机型适配不同的高度和样式[^2]。

const setNavSize = () => {
  const { statusBarHeight, system } = uni.getSystemInfoSync();
  let isIOS = system.indexOf('iOS') > -1;
  
  if (!isIOS) {
    this.navHeight = 96; // 非 iOS 设备的高度设定
  } else {
    this.navHeight = 88; // iOS 设备的高度设定
  }

  this.statusHeight = statusBarHeight * 2;
};

上述代码片段展示了如何动态计算导航栏以及状态栏的高度，并将其应用到页面布局上。对于非苹果系统的移动终端，默认设置了较高的数值；而对于运行 Apple 操作系统的装置，则采用了较低的标准尺寸。

#### 应用于模板结构
最后一步是在 Vue 组件内利用这些变量来自定义顶部区域的设计：

<template>
  <view :style="{ height: `${navHeight}px`, paddingTop: `${statusHeight}px` }">
    <!-- 这里放置自定义的内容 -->
  </view>
</template>

<script>
export default {
  data() {
    return {
      navHeight: 0,
      statusHeight: 0
    };
  },
  onLoad() {
    this.setNavSize(); // 页面加载时初始化大小
  },
  methods: {
    ...setNavSize
  }
};
</script>

这段 HTML 结合 JavaScript 的逻辑实现了基于不同平台特性的响应式设计，确保了应用程序能够在各种类型的智能手机和平板电脑上有良好的视觉效果与用户体验。