uniapp自定义导航栏如何设计自己的样式

Uniapp 自定义导航栏的样式可以通过以下步骤实现：

1. 在 `App.vue` 文件中添加一个自定义组件，用于替换默认的导航栏。例如：

<template>
  <view>
    <custom-nav-bar></custom-nav-bar>
    <router-view></router-view>
  </view>
</template>

<script>
  import CustomNavBar from '@/components/CustomNavBar'

  export default {
    components: {
      CustomNavBar
    }
  }
</script>

2. 在 `CustomNavBar` 组件中设计自己的导航栏样式。例如：

<template>
  <view class="custom-nav-bar">
    <view class="custom-nav-bar-left">
      <!-- 左侧按钮 -->
    </view>
    <view class="custom-nav-bar-title">
      <!-- 中间标题 -->
    </view>
    <view class="custom-nav-bar-right">
      <!-- 右侧按钮 -->
    </view>
  </view>
</template>

<style scoped>
  .custom-nav-bar {
    height: 44px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #fff;
    border-bottom: 1px solid #ccc;
  }

  .custom-nav-bar-left,
  .custom-nav-bar-right {
    flex-basis: 20%;
  }

  .custom-nav-bar-title {
    flex-basis: 60%;
    text-align: center;
    font-size: 18px;
    font-weight: bold;
    color: #333;
  }
</style>

3. 在需要使用自定义导航栏的页面中，设置 `navigationBar` 属性为 `false`，并在 `onLoad` 生命周期中设置自定义导航栏的标题。例如：

export default {
  onLoad() {
    uni.setNavigationBarTitle({
      title: '自定义导航栏'
    })
  },

  onUnload() {
    uni.setNavigationBarTitle({
      title: '默认导航栏'
    })
  },

  ...
}

通过以上步骤，就可以实现 Uniapp 自定义导航栏的样式了。