From f272a57aa3c26c9b1feb2211d873e4cf71b09a95 Mon Sep 17 00:00:00 2001
From: zoujing <kidevelop@163.com>
Date: Wed, 22 Oct 2025 20:08:05 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E5=95=86=E5=93=81=E8=AF=A6=E6=83=85?=
 =?UTF-8?q?=E7=9A=84=E6=BB=9A=E5=8A=A8=E7=9A=84=E8=B0=83=E6=95=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/goods/index.vue         | 21 +++++++++++++++++++--
 src/pages/goods/styles/index.scss |  5 ++++-
 2 files changed, 23 insertions(+), 3 deletions(-)

diff --git a/src/pages/goods/index.vue b/src/pages/goods/index.vue
index 9ddbd54..546416b 100644
--- a/src/pages/goods/index.vue
+++ b/src/pages/goods/index.vue
@@ -1,9 +1,14 @@
 <template>
   <view class="goods-container bg-gray">
-    <TopNavBar title="商品详情" />
+    <TopNavBar
+      title="商品详情"
+      :backgroundColor="`rgba(217, 238, 255, ${navOpacity})`"
+      :titleColor="navOpacity < 0.5 ? '#ffffff' : '#000000'"
+      :backIconColor="navOpacity < 0.5 ? '#ffffff' : '#000000'"
+    />
 
     <!-- 滚动区域 -->
-    <scroll-view class="content-wrapper" scroll-y>
+    <scroll-view class="content-wrapper" scroll-y @scroll="handleScroll">
       <ImageSwiper
         :border-radius="0"
         :height="300"
@@ -76,6 +81,9 @@ import {
 import { ThrottleUtils } from "@/utils";
 import TopNavBar from "@/components/TopNavBar/index.vue";
 import ImageSwiper from "@/components/ImageSwiper/index.vue";
+
+// 导航栏透明度 - 默认透明，随滚动变为不透明
+const navOpacity = ref(0);
 import GoodInfo from "./components/GoodInfo/index.vue";
 import GoodConfirm from "./components/GoodConfirm/index.vue";
 import Calender from "@/components/Calender/index.vue";
@@ -88,6 +96,15 @@ const calendarVisible = ref(false);
 const goodsData = ref({});
 const goodConfirmRef = ref(null);
 
+// 处理滚动事件
+const handleScroll = (e) => {
+  const scrollTop = e.detail.scrollTop;
+  // 设置一个阈值，当滚动超过200px时，导航栏完全不透明
+  const threshold = 200;
+  // 计算透明度，范围从0到1
+  navOpacity.value = Math.min(scrollTop / threshold, 1);
+};
+
 // 格式化日期为 yyyy-mm-dd 格式
 const formatDate = (date) => {
   const year = date.getFullYear();
diff --git a/src/pages/goods/styles/index.scss b/src/pages/goods/styles/index.scss
index a2ba0ce..b49bc90 100644
--- a/src/pages/goods/styles/index.scss
+++ b/src/pages/goods/styles/index.scss
@@ -8,10 +8,13 @@ $button-color: #00a6ff;
 
   // 顶部导航栏固定样式
   :deep(.top-nav-bar) {
-    position: sticky;
+    position: fixed;
     top: 0;
+    left: 0;
+    right: 0;
     z-index: 100;
     flex-shrink: 0;
+    transition: background-color 0.3s ease;
   }
 
   // 使用须知样式