uniapp如何实现自定义导航栏不被状态栏遮盖

要实现自定义导航栏不被状态栏遮盖，可以在uni-app中使用全局导航守卫（global navigation guard）来设置状态栏高度和导航栏高度的差值。

具体步骤如下：

1. 在 App.vue 中设置一个全局变量 statusBarHeight，用来保存状态栏的高度。

export default {
  onLaunch() {
    uni.getSystemInfo({
      success: (res) => {
        this.statusBarHeight = res.statusBarHeight
      }
    })
  }
}

2. 在导航栏组件中，通过计算属性计算出导航栏高度，并设置样式。

export default {
  computed: {
    navBarHeight() {
      return this.statusBarHeight + 44 // 44为导航栏默认高度
    }
  },
  methods: {
    back() {
      uni.navigateBack()
    }
  }
}

<template>
  <view class="nav-bar" :style="{height: navBarHeight + 'px'}">
    <view class="nav-bar__content">
      <view class="nav-bar__left" @click="back">
        <text class="nav-bar__left-icon">返回</text>
      </view>
      <view class="nav-bar__title">{{title}}</view>
      <view class="nav-bar__right"></view>
    </view>
  </view>
</template>

<style>
  .nav-bar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    background-color: #fff;
    box-shadow: 0 1px 5px rgba(0, 0, 0, .1);
    z-index: 999;
  }
  .nav-bar__content {
    display: flex;
    align-items: center;
    height: 44px;
    padding: 0 15px;
  }
  .nav-bar__left {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 100%;
    font-size: 16px;
    color: #333;
  }
  .nav-bar__left-icon {
    font-size: 18px;
    font-weight: bold;
  }
  .nav-bar__title {
    flex: 1;
    font-size: 18px;
    font-weight: bold;
    text-align: center;
    color: #333;
  }
  .nav-bar__right {
    width: 50px;
    height: 100%;
  }
</style>

这样就可以实现自定义导航栏不被状态栏遮盖的效果了。