uniapp自定义顶部导航栏

在uniapp中，我们可以使用自定义组件来实现自定义顶部导航栏。以下是一个简单的示例：

1. 创建一个自定义组件，命名为custom-nav

2. 在custom-nav组件中，添加一个template标签，用来显示页面标题和左右两侧的按钮。如下所示：

<template>
  <view class="nav-bar">
    <view class="nav-left">
      <slot name="left"></slot>
    </view>
    <view class="nav-title">{{title}}</view>
    <view class="nav-right">
      <slot name="right"></slot>
    </view>
  </view>
</template>

3. 在custom-nav组件的script标签中，定义一个props属性，用来接收页面标题的值。如下所示：

<script>
  export default {
    props: {
      title: {
        type: String,
        default: ''
      }
    }
  }
</script>

4. 在页面中使用自定义组件，并传递页面标题的值。如下所示：

<template>
  <view>
    <custom-nav :title="pageTitle">
      <view slot="right">按钮</view>
    </custom-nav>
    <view>页面内容</view>
  </view>
</template>

<script>
  import customNav from '@/components/custom-nav.vue'

  export default {
    components: {
      customNav
    },
    data () {
      return {
        pageTitle: '页面标题'
      }
    }
  }
</script>

在以上示例中，我们创建了一个名为custom-nav的自定义组件，然后在页面中使用该组件，并传递了页面标题的值。同时，在自定义组件中，我们使用了slot来实现左右两侧的按钮。