uniapp自定义顶部导航栏

Uniapp中可以通过使用自定义组件来实现自定义顶部导航栏。以下是一个简单的示例：

1. 在Uniapp项目中创建一个自定义组件，例如命名为"custom-nav"。

2. 在"custom-nav"组件中添加一个顶部导航栏的布局，例如：

<template>
  <view class="nav-wrapper">
    <view class="nav-left">
      <!-- 左侧按钮 -->
    </view>
    <view class="nav-title">
      {{ title }}
    </view>
    <view class="nav-right">
      <!-- 右侧按钮 -->
    </view>
  </view>
</template>

<style>
  .nav-wrapper {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 44px;
    background-color: #fff;
    border-bottom: 1px solid #eee;
  }
  
  .nav-left,
  .nav-right {
    width: 50px;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  
  .nav-title {
    flex: 1;
    text-align: center;
    font-size: 16px;
    font-weight: bold;
  }
</style>

3. 在父组件中使用"custom-nav"组件，并在"custom-nav"组件中传递标题和按钮等参数，例如：

<template>
  <view class="container">
    <custom-nav title="自定义导航栏" :showLeftButton="true" :showRightButton="true" />
    <!-- 页面内容 -->
  </view>
</template>

<script>
  import CustomNav from '@/components/custom-nav/index.vue';

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

<style>
  .container {
    padding-top: 44px; /* 需要加上导航栏高度 */
  }
</style>

4. 在"custom-nav"组件中通过props接收父组件传递的参数，并在模板中根据参数来显示或隐藏左右按钮等，例如：

<template>
  <view class="nav-wrapper">
    <view class="nav-left" v-if="showLeftButton">
      <!-- 左侧按钮 -->
    </view>
    <view class="nav-title">
      {{ title }}
    </view>
    <view class="nav-right" v-if="showRightButton">
      <!-- 右侧按钮 -->
    </view>
  </view>
</template>

<script>
  export default {
    props: {
      title: {
        type: String,
        default: ''
      },
      showLeftButton: {
        type: Boolean,
        default: false
      },
      showRightButton: {
        type: Boolean,
        default: false
      }
    }
  }
</script>

这样就可以在Uniapp中实现自定义顶部导航栏了。