提供一个uniapp微信小程序自定义导航栏的组件，背景是渐变的

在 UniApp 中创建一个带渐变背景的自定义导航栏组件，首先需要了解 Vue 组件的基本结构，并利用 Uni-app 的样式能力和组件化特性。下面是一个简单的示例：

<!-- uni-custom-header.vue -->
<template>
  <view class="custom-header">
    <header class="navbar navbar-default">
      <!-- 渐变背景 -->
      <view class="gradient-bg">
        <color-picker :color="gradientColor" @change="updateGradient"></color-picker> <!-- 可选，如果需要用户选择颜色 -->
        <div class="gradient-wrapper">
          <view class="gradient-layer gradient-layer-1" v-bind:class="{ active: gradientState === 'layer1' }"></view>
          <view class="gradient-layer gradient-layer-2" v-bind:class="{ active: gradientState === 'layer2' }"></view>
        </div>
      </view>
      <!-- 导航栏内容 -->
      <nav class="navbar-content">
        <slot></slot> <!-- 通过 slot 接收外部传入的内容 -->
      </nav>
    </header>
  </view>
</template>

<script>
export default {
  data() {
    return {
      gradientColor: '#008CBA', // 初始渐变颜色
      gradientState: 'layer1', // 当前层
    };
  },
  methods: {
    updateGradient(newColor) {
      this.gradientColor = newColor;
    }
  }
};
</script>

<style scoped>
.navbar {
  height: 44rpx;
}

.gradient-bg {
  position: relative;
  background-image: linear-gradient(to right, {{ gradientColor }}, {{ gradientColor }} 50%, transparent 50%);
}

.gradient-layer {
  width: 100%;
  height: 100%;
  position: absolute;
  opacity: 0.5;
  transition: opacity 0.3s ease;
}

.gradient-layer-1 {
  background-color: rgba(0, 140, 186, 0.5);
}

.gradient-layer-2 {
  background-color: rgba(0, 140, 186, 0.3);
}

.gradient-wrapper {
  display: flex;
  justify-content: space-between;
}
</style>

使用这个组件的方式是在需要的地方导入并使用它：

<template>
  <view>
    <uni-custom-header>
      <navigator-bar title="我的标题"> <!-- 自定义内容部分 -->
      </navigator-bar>
    </uni-custom-header>
  </view>
</template>

<template>
  <import src='./uni-custom-header.vue'></import>
</script>