uniapp自定义导航栏

在uniapp中，可以通过修改页面的样式来实现自定义导航栏。具体步骤如下：

在App.vue中定义全局样式：

<style>
  /* 自定义导航栏样式 */
  .uni-nav-bar {
    background-color: #fff; /* 导航栏背景色 */
    color: #000; /* 导航栏文字颜色 */
    height: 44px; /* 导航栏高度 */
    border-bottom: 1px solid #ddd; /* 导航栏底部分割线 */
  }
</style>

在需要自定义导航栏的页面中，在最外层容器上加上类名 uni-status-bar，并设置样式：

<template>
  <view class="uni-status-bar">
    <!-- 导航栏内容 -->
  </view>
</template>

<style>
  /* 导航栏标题样式 */
  .uni-nav-bar__title {
    font-size: 18px;
    font-weight: bold;
  }
</style>

在页面中通过uni.setStatusBarStyle方法设置状态栏样式：

<script>
  export default {
    onLoad() {
      uni.setStatusBarStyle({
        style: 'light', // 状态栏文字颜色，可选值为：light、dark
        backgroundColor: '#fff', // 状态栏背景色
      });
    },
  };
</script>

注意：在iOS设备上，如果导航栏和状态栏颜色相同，状态栏文字可能会变成白色，需要通过设置状态栏文字颜色为dark来解决