uniapp中解决导航栏位置和状态栏位置冲突

当在uniapp中自定义导航栏时，可能会遇到导航栏位置和状态栏位置冲突的问题。

1.设置页面的导航栏样式：

在需要使用自定义导航栏的页面组件中，可以通过设置页面的导航栏样式来解决导航栏位置和状态栏位置冲突的问题。在pages/home/index.vue文件中，编写以下代码：

（代码中，我们在页面组件中的onNavigationBarButtonTap生命周期函数中设置了导航栏样式，通过uni.setNavigationBarStyle方法设置了导航栏顶部留白高度为自定义导航栏的高度（这里假设自定义导航栏的高度为44px））

<template>
  <view>
    <custom-navigation-bar title="首页"></custom-navigation-bar>
    <!-- 页面内容 -->
  </view>
</template>

<script>
import CustomNavigationBar from '@/components/CustomNavigationBar.vue'

export default {
  components: {
    CustomNavigationBar
  },
  onNavigationBarButtonTap() {
    // 设置导航栏样式
    uni.setNavigationBarStyle({
      paddingTop: '44px' // 设置导航栏顶部留白高度，与自定义导航栏的高度一致
    })
  }
}
</script>

注意：此处自定义导航栏CustomNavigationBar组件为直接引入，如有疑惑请参考主页上一篇博客。

2.设置状态栏样式：

为了避免状态栏和导航栏重叠，你可以通过设置状态栏的样式来解决冲突问题。在App.vue文件中，编写以下代码：

<script>
export default {
  onLaunch() {
    // 设置状态栏样式
    uni.setNavigationBarStyle({
      statusBarHeight: '44px' // 设置状态栏高度，与自定义导航栏的高度一致
    })
  }
}
</script>