优化导航栏控件，支持背景透明度

components/navbar/customNavbar.vue

@@ -1,17 +1,35 @@
 <template>
   <view
     class="custom-navbar"
-    :style="{ paddingTop: statusBarHeight + 'px', height: navHeight + 'px' }"
+    :class="{ 'transparent': isTransparent, 'opaque': !isTransparent }"
+    :style="{
+      paddingTop: statusBarHeight + 'px', 
+      height: navHeight + 'px',
+      // 使用rgba颜色值控制背景透明度，而不是整个元素的opacity
+      backgroundColor: `rgba(${hexToRgb(bgColor)}, ${opacity})`
+    }"
   >
     <view class="nav-content">
       <!-- 左侧返回 -->
       <view class="nav-left">
-        <u-icon name="arrow-left" size="44" color="#333" @click="onBack" v-if="showBack"></u-icon>
-        <u-icon name="home" size="44" color="#333" @click="goHome" v-if="showHome"></u-icon>
+        <u-icon 
+          name="arrow-left" 
+          size="44" 
+          :color="textColor" 
+          @click="onBack" 
+          v-if="showBack"
+        ></u-icon>
+        <u-icon 
+          name="home" 
+          size="44" 
+          :color="textColor" 
+          @click="goHome" 
+          v-if="showHome"
+        ></u-icon>
       </view>
 
       <!-- 中间标题 -->
-      <view class="nav-title">{{ title }}</view>
+      <view class="nav-title" :style="{ color: textColor }">{{ title }}</view>
 
       <!-- 右侧按钮（位于胶囊左侧） -->
       <view
@@ -26,10 +44,18 @@
         >
           <u-icon
             :name="btn.icon"
-            :color="btn.color || '#333'"
+            :color="btn.color || textColor"
             :size="btn.size || 40"
           ></u-icon>
         </view>
+        <!-- 额外的右侧图标 -->
+        <view class="nav-btn" v-for="(icon, index) in extraIcons" :key="index" @click="onExtraIconClick(index)">
+          <u-icon
+            :name="icon"
+            :color="textColor"
+            size="40"
+          ></u-icon>
+        </view>
       </view>
     </view>
   </view>
@@ -50,15 +76,38 @@ export default {
     back: {
       type: Function,
       default: null,
+    },	 
+    // 导航栏样式控制
+    isTransparent: {
+      type: Boolean,
+      default: false
     },
-	 showBack: {
-	      type: Boolean,
-	      default: true // 左侧返回按钮默认显示
-	    },
-	    showHome: {
-	      type: Boolean,
-	      default: true // 回首页按钮默认显示
-	    }
+    bgColor: {
+      type: String,
+      default: '#ffffff'
+    },
+    textColor: {
+      type: String,
+      default: '#333333'
+    },
+    opacity: {
+      type: Number,
+      default: 1
+    },
+    extraIcons: {
+      type: Array,
+      default: () => []
+    },
+    
+    // 按钮显示控制
+    showBack: {
+      type: Boolean,
+      default: true // 左侧返回按钮默认显示
+    },
+    showHome: {
+      type: Boolean,
+      default: false // 回首页按钮默认不显示
+    }
   },
   data() {
     return {
@@ -87,6 +136,24 @@ export default {
     }
   },
   methods: {
+    // 十六进制颜色转RGB
+    hexToRgb(hex) {
+      // 移除#号
+      hex = hex.replace(/^#/, '');
+      
+      // 处理缩写形式（如#RGB）
+      if (hex.length === 3) {
+        hex = hex.split('').map(char => char + char).join('');
+      }
+      
+      // 解析RGB值
+      const r = parseInt(hex.substring(0, 2), 16);
+      const g = parseInt(hex.substring(2, 4), 16);
+      const b = parseInt(hex.substring(4, 6), 16);
+      
+      return `${r}, ${g}, ${b}`;
+    },
+    
     onBack() {
       if (this.back) {
         this.back();
@@ -95,9 +162,13 @@ export default {
       }
     },
     goHome(){
-       	uni.reLaunch({
+        	uni.reLaunch({
 					url:'../index/index'
 				})
+    },
+    onExtraIconClick(index) {
+      // 额外图标点击事件，可通过事件冒泡传递给父组件
+      this.$emit('extra-icon-click', index);
     }
   },
 };
@@ -109,9 +180,8 @@ export default {
   top: 0;
   left: 0;
   right: 0;
-  background-color: #fff;
-  box-shadow: 0 2rpx 6rpx rgba(0, 0, 0, 0.08);
   z-index: 999;
+  transition: all 0.3s ease;
 
   .nav-content {
     display: flex;
@@ -131,8 +201,6 @@ export default {
     flex: 1;
     text-align: center;
     font-size: 32rpx;
-    font-weight: bold;
-    color: #333;
   }
 
   .nav-right {
@@ -142,5 +210,15 @@ export default {
       margin-left: 20rpx;
     }
   }
+  
+  // 透明状态样式
+  &.transparent {
+    background-color: rgba(255, 255, 255, 0);
+  }
+  
+  // 不透明状态样式
+  &.opaque {
+    box-shadow: 0 2rpx 6rpx rgba(0, 0, 0, 0.08);
+  }
 }
 </style>