修复 SCSS 变量未定义错误和滚动监听问题

gym-manage-uniapp/pages/index/index.vue

@@ -4,8 +4,8 @@
     <image src="https://gymfuture.oss-cn-chengdu.aliyuncs.com/static/images/wave_top.png" mode="widthFix" class="wave-bg wave-top" />
     <image src="https://gymfuture.oss-cn-chengdu.aliyuncs.com/static/images/wave_bottom.png" mode="widthFix" class="wave-bg wave-bottom" />
   </view>
-    <!-- 固定白色块（滚动时显示） -->
-    <view class="hand" :style="{height : handHeight + 'rpx'}" v-show="isShow"></view>
+  <!-- 固定白色块（滚动时显示） -->
+  <view class="hand" :style="{height : handHeight + 'rpx'}" v-show="isShow"></view>
   
   <!-- 滚动内容区域 -->
   <scroll-view 
@@ -17,25 +17,20 @@
     @scroll="handleScroll"
     class="scroll-container"
   >
-    
     <!-- 主内容 -->
     <view class="home-page">
-      <!-- 骨架屏 -->
       <HomeSkeleton v-if="loading" />
-      
-      <!-- 实际内容 -->
       <template v-else>
         <BannerSwiper />
         <QuickEntry />
         <RecommendCourses />
         <TodayRecommend />
-        <!-- 底部占位，给 TabBar 留出空间 -->
         <view class="bottom-placeholder"></view>
       </template>
     </view>
   </scroll-view>
   
-  <!-- TabBar 固定在底部，不参与滚动 -->
+  <!-- TabBar 固定在底部 -->
   <view class="tabbar-fixed">
     <TabBar />
   </view>
@@ -56,13 +51,34 @@ const handHeight = ref(0)
 const scrollDistance = ref(0)
 const isRefreshing = ref(false)
 
+// 获取可视窗口高度
+const windowHeight = ref(0)
+// 获取整个滚动内容的高度
+const scrollContentHeight = ref(0)
+
 // 滚动监听
 const handleScroll = (e) => {
   const distance = e.detail.scrollTop
   scrollDistance.value = distance
   
-  // 控制白色块显示/隐藏
-  isShow.value = distance > 238
+  // 获取滚动容器的高度（可视区域高度）
+  const scrollViewHeight = e.detail.scrollHeight
+  scrollContentHeight.value = scrollViewHeight
+  
+  // 计算滚动百分比
+  // 滚动百分比 = 当前滚动距离 / (内容总高度 - 可视区域高度) * 100
+  const maxScrollDistance = scrollContentHeight.value - windowHeight.value
+  let scrollPercent = 0
+  
+  if (maxScrollDistance > 0) {
+    scrollPercent = (distance / maxScrollDistance) * 100
+  }
+  
+  console.log(`滚动距离: ${distance}, 滚动百分比: ${scrollPercent.toFixed(2)}%`)
+  
+  // 当滚动超过 10% 时显示白色块（你可以调整这个百分比）
+  const SHOW_THRESHOLD = 40 // 10% 的阈值，可以根据需要调整
+  isShow.value = scrollPercent > SHOW_THRESHOLD
 }
 
 // 下拉刷新处理
@@ -101,10 +117,30 @@ onMounted(() => {
   setTimeout(() => {
     loading.value = false
   }, 1500)
+  
   // 获取胶囊按钮高度
   const menuButtonInfo = uni.getMenuButtonBoundingClientRect()
   const navTotalHeight = menuButtonInfo.top + menuButtonInfo.height
-  handHeight.value = navTotalHeight * 2
+  handHeight.value = navTotalHeight * 2.5
+  
+  // 获取可视窗口高度
+  uni.getSystemInfo({
+    success: (res) => {
+      windowHeight.value = res.windowHeight
+      console.log('可视窗口高度:', windowHeight.value)
+    }
+  })
+  
+  // 延迟获取滚动内容高度（确保DOM已渲染）
+  setTimeout(() => {
+    const query = uni.createSelectorQuery().in(this)
+    query.select('.home-page').boundingClientRect(data => {
+      if (data) {
+        scrollContentHeight.value = data.height
+        console.log('内容总高度:', scrollContentHeight.value)
+      }
+    }).exec()
+  }, 500)
 })
 </script>
 
@@ -144,13 +180,12 @@ onMounted(() => {
   z-index: 1;
   height: 100vh;
   width: 100%;
-  // background: linear-gradient(180deg, #D6EEF8 0%, #E4F2FA 15%, #EEF6FB 30%, #F5FAFD 50%, #FAFCFE 70%, #FFFFFF 100%);
 }
 
 /* 主内容区域 */
 .home-page {
   min-height: 100vh;
-  padding-bottom: 160rpx; /* 为 TabBar 留出空间 */
+  padding-bottom: 160rpx;
 }
 
 /* 固定白色块 */
@@ -174,38 +209,6 @@ onMounted(() => {
 }
 
 .bottom-placeholder {
-  height: 120rpx; /* 调整高度，避免内容被 TabBar 遮挡 */
-}
-
-/* 其他样式保持不变 */
-.glow {
-  position: absolute;
-  border-radius: 50%;
-  pointer-events: none;
-  z-index: 0;
-}
-
-.glow-1 {
-  width: 400rpx;
-  height: 400rpx;
-  top: 60rpx;
-  right: -100rpx;
-  background: radial-gradient(circle, rgba(160, 210, 235, 0.35) 0%, transparent 70%);
-}
-
-.glow-2 {
-  width: 300rpx;
-  height: 300rpx;
-  top: 500rpx;
-  left: -80rpx;
-  background: radial-gradient(circle, rgba(180, 220, 240, 0.3) 0%, transparent 70%);
-}
-
-.glow-3 {
-  width: 250rpx;
-  height: 250rpx;
-  top: 900rpx;
-  right: -60rpx;
-  background: radial-gradient(circle, rgba(170, 215, 238, 0.25) 0%, transparent 70%);
+  height: 120rpx;
 }
 </style>