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

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 
-        <u-icon name="home" size="44" color="#333" @click="goHome" v-if="showHome"></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: {
+    bgColor: {
-	      type: Boolean,
+      type: String,
-	      default: true // 左侧返回按钮默认显示
+      default: '#ffffff'
-	    },
+    },
-	    showHome: {
+    textColor: {
-	      type: Boolean,
+      type: String,
-	      default: true // 回首页按钮默认显示
+      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>

pages/detail/assetsDetail.vue

@@ -1,15 +1,19 @@
 <template>
 	<view class="asset-detail">
 		<!-- 顶部导航栏 -->
-		<!--   <customNavbar
+		<customNavbar
-      title="资产详情" ref="navbar"/> -->
+		  title="资产详情" 
+		  ref="navbar"
+		  :is-transparent="navbarStyle.isTransparent"
+		  :bg-color="navbarStyle.bgColor"
+		  :text-color="navbarStyle.textColor"
+		  :opacity="navbarStyle.opacity"
+		  :extra-icons="navbarStyle.extraIcons"
+		  :show-home="false"
+		/>
 
-		<!-- <u-navbar title="资产详情" :autoBack="true" :background="background" title-color="#2D2B2C"
-			back-icon-color="#2D2B2C">
-		</u-navbar> -->
 		<!-- 图片展示区 -->
 		<view class="image-section" :style="{ paddingTop: navTotalHeight + 'px' }">
-			<u-icon name="arrow-left" color="#000000" size="24px" @click="back"></u-icon>
 			<image src="/static/30091712.jpg"></image>
 			<!-- <AssetGallery
 	  :insideImages="asset.images"
@@ -156,6 +160,18 @@
 					// 渐变色
 					// backgroundImage: 'linear-gradient(-90deg, #F9DED9 0%, #F8DFC0 99%);'
 				},
+				
+				// 导航栏样式控制
+				navbarStyle: {
+					isTransparent: true,
+					bgColor: '#ffffff',
+					textColor: '#000000',
+					opacity: 0,
+					extraIcons: ['ellipsis', 'eye'] // 右侧额外图标
+				},
+				
+				// 滚动距离
+				scrollTop: 0
 			};
 		},
 		onLoad(options) {
@@ -165,12 +181,36 @@
 			// this.recordView();
 		},
 		mounted() {
-			// const navbar = this.$refs.navbar;
+			const navbar = this.$refs.navbar;
-			// const navHeight = navbar.navContentHeight; // 直接拿子组件 data
+			 const navHeight = navbar.navContentHeight; // 直接拿子组件 data
-			// this.navTotalHeight = navHeight; // 加上额外间距
+			 this.navTotalHeight = navHeight; // 加上额外间距
-
+		},
+		onPageScroll(e) {
+			this.scrollTop = e.scrollTop;
+			// 计算导航栏透明度和样式
+			this.updateNavbarStyle(e.scrollTop);
 		},
 		methods: {
+			// 根据滚动距离更新导航栏样式
+			updateNavbarStyle(scrollTop) {
+				// 定义滚动阈值，超过此值导航栏变为不透明
+				const threshold = 200;
+				
+				// 计算透明度
+				let opacity = scrollTop / threshold;
+				opacity = Math.min(opacity, 1);
+				opacity = Math.max(opacity, 0);
+				
+				// 更新导航栏样式
+				this.navbarStyle.opacity = opacity;
+
+				if (opacity > 0.5) {
+					this.navbarStyle.isTransparent = false;
+				} else {
+					this.navbarStyle.isTransparent = true;
+				}
+			},
+			
 			// 模拟接口请求
 			loadAssetDetail() {
 				setTimeout(() => {
@@ -187,19 +227,24 @@
 						address: '广州市天河区体育西路88号',
 						lat: 23.135,
 						lng: 113.327,
-						images: [{
+						images: [
-							image: '/static/img/index/swiper/swiper3.jpg'
+							{
-						}],
+								image:'/static/img/index/swiper/swiper3.jpg'
+							}
+								
+						],
 						remark: '该资产目前用于办公出租，维护状态良好。',
 						isFavorite: false,
 						status: 0
 					};
-					this.markers = [{
+					this.markers = [
-						id: 1,
+						{
-						latitude: this.asset.lat,
+							id: 1,
-						longitude: this.asset.lng,
+							latitude: this.asset.lat,
-						title: this.asset.name,
+							longitude: this.asset.lng,
-					}, ];
+							title: this.asset.name,
+						},
+					];
 				}, 300);
 			},
 			formatMoney(num) {
@@ -238,31 +283,10 @@
 
 				});
 			},
-			back(){
-				// let pages = getCurrentPages();
-				// let beforePage = pages[pages.length - 2];
-				
-				uni.navigateBack({
-					// delta: 1,
-					success: function() {
-						// beforePage.onLoad(beforePage
-						// 	.options); // 执行前一个页面的onLoad方法
-					}
-				})
-			},
 		},
 	};
 </script>
 
-<style scoped>
-	.image-section >>> .u-icon{
-		position: absolute;
-		z-index: 99;
-		top: 80rpx;
-		left: 36rpx;
-	}
-</style>
-
 <style lang="scss" scoped>
 	.asset-detail {
 		background-color: #f7f8fa;