uni-app 中如何正确使用自定义导航栏并适配状态栏高度？

在 uni-app 中使用自定义导航栏并适配不同手机的状态栏高度，这个问题确实挺常见的。主要挑战在于不同设备的状态栏高度不一致，而且获取这些信息有时会有延迟。我们可以通过生命周期钩子和一些小技巧来解决这个问题。

首先，你需要在 onLoad 生命周期中获取状态栏的高度，而不是 onReady。原因是 onLoad 在页面加载时就会执行，能更早地获取到系统信息。

具体来说，你可以这样做：

1. 使用 uni.getSystemInfoSync() 获取状态栏高度，并将其保存到一个 data 属性中。
2. 在模板中动态设置自定义导航栏的内边距，确保它不会被状态栏遮挡。

下面是一个完整的示例代码：

<template>

  <view>

    <!-- 自定义导航栏 -->

    <view class="custom-nav" :style="{ paddingTop: statusBarHeight + 'px' }">

      <text>我的标题</text>

    </view>

    <!-- 页面内容 -->

    <view class="content">

      <text>这里是页面内容</text>

    </view>

  </view>

</template>



<script>

export default {

  data() {

    return {

      statusBarHeight: 0 // 初始化状态栏高度为0

    };

  },

  onLoad() {

    // 在页面加载时获取状态栏高度

    const systemInfo = uni.getSystemInfoSync();

    this.statusBarHeight = systemInfo.statusBarHeight;

  }

};

</script>



<style>

.custom-nav {

  background-color: #f0f0f0;

  height: 44px; /* 导航栏高度 */

  display: flex;

  justify-content: center;

  align-items: center;

}



.content {

  padding-top: 20px; /* 根据实际需要调整内容区的上边距 */

}

</style>

为什么这样做

- 生命周期选择: onLoad 比 onReady 更早执行，这样可以确保在页面渲染之前就获取到了状态栏的高度信息。
- 同步获取: 使用 uni.getSystemInfoSync() 可以同步获取系统信息，避免异步带来的不确定性。
- 动态样式: 通过 :style 绑定，可以根据不同的状态栏高度动态调整自定义导航栏的内边距。

这样处理之后，你的自定义导航栏应该能够很好地适配不同设备的状态栏高度，不再会出现被遮挡的问题。希望这个方法对你有帮助。

第一步，我们要确保获取到的状态栏高度是准确的，并且在页面渲染之前就已经准备好。你提到使用 uni.getSystemInfoSync() 来获取状态栏高度是个好方法，但有时候在生命周期函数中获取可能会有问题，特别是 onReady 这个时机可能还不足以保证页面完全准备就绪。我们可以把获取状态栏高度的操作放在 onLoad 生命周期函数里，这样可以更早地拿到这个值。

第二步，我们需要将获取到的状态栏高度应用到自定义导航栏的样式中。这里的关键是要确保样式在页面加载时就能生效，而不是等到页面渲染完了再去调整。我们可以使用计算属性或者在 data 中直接设置一个初始值来实现这一点。

第三步，为了防止一些特殊情况下的延迟问题，比如某些设备上的异步操作导致的延时，我们可以在 data 中预先设置一个默认的状态栏高度，这样即使后续获取的实际高度有延迟，用户也不会看到明显的布局跳动。

下面是具体的实现代码：

<template>

  <view class="custom-nav" :style="{ paddingTop: statusBarHeight + 'px' }">

    <text>我的标题</text>

  </view>

</template>



<script>

export default {

  data() {

    return {

      // 预设一个默认的状态栏高度，大部分设备都是20px，这里取30px保险起见

      statusBarHeight: 30

    };

  },

  onLoad() {

    // 在页面加载时获取状态栏高度

    const systemInfo = uni.getSystemInfoSync();

    this.statusBarHeight = systemInfo.statusBarHeight;

  }

};

</script>



<style>

.custom-nav {

  background-color: #4CD964;

  height: 88px; /* 假设导航栏的高度是88px */

  display: flex;

  align-items: center;

  justify-content: center;

}

</style>

这样做的好处是，在页面加载初期我们就已经设置了状态栏的高度，即使在获取到实际的高度之前，用户也能看到正确的布局。一旦 onLoad 中的 uni.getSystemInfoSync() 执行完毕并更新了 statusBarHeight，Vue 的响应式系统会自动更新视图，整个过程对用户体验来说几乎是无缝的。希望这个方法能帮到你，解决自定义导航栏和状态栏高度适配的问题。