feat: 商品详情的滚动的调整

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();

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;
   }
 
   // 使用须知样式