用uniapp写一个自定义导航栏组件代码

好的，下面是一个简单的自定义导航栏组件的代码示例：

*custom-nav.vue*

<template>
  <view class="custom-nav" :style="navStyle">
    <view class="nav-left" @click="onLeftClick">
      <slot name="left"></slot>
    </view>
    <view class="nav-title">{{ title }}</view>
    <view class="nav-right" @click="onRightClick">
      <slot name="right"></slot>
    </view>
  </view>
</template>

<script>
  export default {
    props: {
      title: {
        type: String,
        default: ''
      },
      bgColor: {
        type: String,
        default: '#fff'
      },
      textColor: {
        type: String,
        default: '#000'
      }
    },
    computed: {
      navStyle() {
        return {
          backgroundColor: this.bgColor,
          color: this.textColor
        }
      }
    },
    methods: {
      onLeftClick() {
        this.$emit('leftclick')
      },
      onRightClick() {
        this.$emit('rightclick')
      }
    }
  }
</script>

<style scoped>
  .custom-nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 44px;
    padding: 0 16px;
    font-size: 18px;
  }
  .nav-left,
  .nav-right {
    width: 44px;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .nav-title {
    flex: 1;
    text-align: center;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
</style>

使用时，在需要使用自定义导航栏的页面中引入该组件：

<template>
  <view>
    <custom-nav
      title="自定义导航栏"
      bgColor="#f8f8f8"
      textColor="#333"
      @leftclick="onLeftClick"
      @rightclick="onRightClick"
    >
      <template v-slot:left>
        <text>返回</text>
      </template>
      <template v-slot:right>
        <text>更多</text>
      </template>
    </custom-nav>
    <view class="content">
      <!-- 页面内容 -->
    </view>
  </view>
</template>

这样就可以实现一个简单的自定义导航栏组件了。