uniapp 手机导航栏字体被自定义导航栏覆盖

在uniapp中使用自定义导航栏时，由于自定义导航栏是覆盖在系统原生导航栏上的，可能会导致系统原生导航栏的字体被覆盖，从而出现字体看不清的情况。针对这个问题，可以尝试以下两种解决方案：

1. 设置状态栏字体颜色

可以通过在页面的vue文件中设置状态栏字体颜色，使字体颜色与自定义导航栏的背景颜色相同，从而解决字体被覆盖的问题。具体操作如下：

<template>
  <view>
    <!-- 自定义导航栏 -->
  </view>
</template>

<script>
  export default {
    onShow() {
      uni.setNavigationBarColor({
        frontColor: '#ffffff', // 设置状态栏字体颜色为白色
        backgroundColor: '#333333' // 设置自定义导航栏背景颜色
      })
    }
  }
</script>

2. 隐藏系统原生导航栏

可以通过在页面的vue文件中设置页面属性，隐藏系统原生导航栏，从而避免字体被覆盖的问题。具体操作如下：

<template>
  <view>
    <!-- 自定义导航栏 -->
  </view>
</template>

<script>
  export default {
    onShow() {
      uni.hideNavigationBarLoading() // 隐藏系统原生导航栏
    }
  }
</script>

以上就是解决uniapp自定义导航栏覆盖状态栏字体的两种方法，可以根据实际情况选择适合自己的方案。