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

pages/detail/assetsDetail.vue

@@ -1,15 +1,19 @@
 <template>
 	<view class="asset-detail">
 		<!-- 顶部导航栏 -->
-		<!--   <customNavbar
-      title="资产详情" ref="navbar"/> -->
+		<customNavbar
+		  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 navHeight = navbar.navContentHeight; // 直接拿子组件 data
-			// this.navTotalHeight = navHeight; // 加上额外间距
-
+			const navbar = this.$refs.navbar;
+			 const navHeight = navbar.navContentHeight; // 直接拿子组件 data
+			 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: [{
-							image: '/static/img/index/swiper/swiper3.jpg'
-						}],
+						images: [
+							{
+								image:'/static/img/index/swiper/swiper3.jpg'
+							}
+								
+						],
 						remark: '该资产目前用于办公出租，维护状态良好。',
 						isFavorite: false,
 						status: 0
 					};
-					this.markers = [{
-						id: 1,
-						latitude: this.asset.lat,
-						longitude: this.asset.lng,
-						title: this.asset.name,
-					}, ];
+					this.markers = [
+						{
+							id: 1,
+							latitude: this.asset.lat,
+							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;