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

2026-03-07 17:32:25 +08:00 · 2025-12-25 17:31:04 +08:00
parent d5953d219f
commit dac2ae956d
2 changed files with 160 additions and 58 deletions
--- a/components/navbar/customNavbar.vue
+++ b/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>
@@ -51,13 +77,36 @@ export default {
      type: Function,
      default: null,
    },	 
+    // 导航栏样式控制
+    isTransparent: {
+      type: Boolean,
+      default: false
+    },
+    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: true // 回首页按钮默认显示
+      default: false // 回首页按钮默认不显示
    }
  },
  data() {
@@ -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();
@@ -98,6 +165,10 @@ export default {
        	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>
--- a/pages/detail/assetsDetail.vue
+++ b/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: [{
+						images: [
+							{
 								image:'/static/img/index/swiper/swiper3.jpg'
-						}],
+							}
+								
+						],
 						remark: '该资产目前用于办公出租，维护状态良好。',
 						isFavorite: false,
 						status: 0
 					};
-					this.markers = [{
+					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;