feat(动画): 优化数字滚动动画触发逻辑

添加状态锁防止数字滚动动画重复触发
将动画触发逻辑从数据加载函数移到切换函数中
添加数据重新加载时的动画触发逻辑

 <!--
 <!--
  * @Date: 2025-01-09 00:00:00
  * @Date: 2025-01-09 00:00:00
  * @LastEditors: hookehuyr hookehuyr@gmail.com
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2025-10-25 19:35:03
+ * @LastEditTime: 2025-10-25 19:47:47
  * @FilePath: /lls_program/src/components/RankingCard.vue
  * @FilePath: /lls_program/src/components/RankingCard.vue
  * @Description: 排行榜卡片组件
  * @Description: 排行榜卡片组件
 -->
 -->
@@ -289,6 +289,16 @@ const switchTab = async (tab) => {
     // 重新加载排行榜数据
     // 重新加载排行榜数据
     await loadLeaderboardData(false)
     await loadLeaderboardData(false)
 
 
+    // 数据加载完成后触发数字滚动动画
+    setTimeout(() => {
+      // 先重置数字滚动状态
+      resetNumberRoll()
+      // 延迟一点再触发滚动
+      setTimeout(() => {
+        triggerNumberRoll()
+      }, 100)
+    }, 300)
+
     // 内容切换后，结束切换状态，开始淡入动画
     // 内容切换后，结束切换状态，开始淡入动画
     setTimeout(() => {
     setTimeout(() => {
       isContentSwitching.value = false
       isContentSwitching.value = false
@@ -325,14 +335,6 @@ const loadLeaderboardData = async (isInitialLoad = false) => {
       currentDate.value = response.data.yesterday
       currentDate.value = response.data.yesterday
       // TODO: 设置总家庭数
       // TODO: 设置总家庭数
       currentTotalFamilySum.value = 2318;
       currentTotalFamilySum.value = 2318;
-
-      // 数据加载完成后，延迟触发数字滚动动画
-      setTimeout(() => {
-        resetNumberRoll()
-        setTimeout(() => {
-          triggerNumberRoll()
-        }, 100)
-      }, 300)
     }
     }
   } catch (error) {
   } catch (error) {
     console.error('获取排行榜数据失败:', error)
     console.error('获取排行榜数据失败:', error)

@@ -295,6 +295,13 @@ const handleStepsSynced = async () => {
   console.log('微信步数同步完成，开始刷新Dashboard页面数据')
   console.log('微信步数同步完成，开始刷新Dashboard页面数据')
   // 步数同步完成后，调用统一的数据刷新函数
   // 步数同步完成后，调用统一的数据刷新函数
   await refreshDashboardData();
   await refreshDashboardData();
+  
+  // 如果已经触发过页面滚动，则在数据刷新后触发数字滚动
+  if (hasTriggeredNumberRoll.value) {
+    setTimeout(() => {
+      triggerNumberRollForDataReload();
+    }, 500);
+  }
 }
 }
 
 
 /**
 /**
@@ -307,6 +314,8 @@ const handleSyncFailed = (data) => {
 
 
 // 滚动监听相关
 // 滚动监听相关
 const hasTriggeredNumberRoll = ref(false)
 const hasTriggeredNumberRoll = ref(false)
+// 防止重复触发的状态锁
+const isNumberRollInProgress = ref(false)
 
 
 // 监听全局的微信步数同步成功事件（用于处理401重试后的成功情况）
 // 监听全局的微信步数同步成功事件（用于处理401重试后的成功情况）
 onMounted(() => {
 onMounted(() => {
@@ -508,6 +517,13 @@ useDidShow(async () => {
   if (familyAlbumRef.value) {
   if (familyAlbumRef.value) {
     familyAlbumRef.value.refreshData();
     familyAlbumRef.value.refreshData();
   }
   }
+
+  // 如果已经触发过页面滚动，则在数据刷新后触发数字滚动
+  if (hasTriggeredNumberRoll.value) {
+    setTimeout(() => {
+      triggerNumberRollForDataReload();
+    }, 500);
+  }
 })
 })
 
 
 useReady(async () => {
 useReady(async () => {
@@ -670,17 +686,50 @@ const handlePageScroll = (scrollTop) => {
  * 触发数字滚动动画
  * 触发数字滚动动画
  */
  */
 const triggerNumberRoll = () => {
 const triggerNumberRoll = () => {
-  if (hasTriggeredNumberRoll.value) {
+  if (hasTriggeredNumberRoll.value || isNumberRollInProgress.value) {
     return
     return
   }
   }
 
 
   hasTriggeredNumberRoll.value = true
   hasTriggeredNumberRoll.value = true
+  isNumberRollInProgress.value = true
 
 
   // 延迟一点时间再触发，让用户看到滚动效果
   // 延迟一点时间再触发，让用户看到滚动效果
   setTimeout(() => {
   setTimeout(() => {
     if (rankingCardRef.value && rankingCardRef.value.startNumberRoll) {
     if (rankingCardRef.value && rankingCardRef.value.startNumberRoll) {
       rankingCardRef.value.startNumberRoll()
       rankingCardRef.value.startNumberRoll()
     }
     }
+    // 滚动完成后重置状态锁
+    setTimeout(() => {
+      isNumberRollInProgress.value = false
+    }, 1000) // 假设滚动动画需要1秒
+  }, 300)
+}
+
+/**
+ * 触发数字滚动动画（用于数据重新加载时）
+ */
+const triggerNumberRollForDataReload = () => {
+  // 如果正在进行滚动动画，则跳过
+  if (isNumberRollInProgress.value) {
+    return
+  }
+
+  isNumberRollInProgress.value = true
+
+  // 重置状态，允许重新触发
+  if (rankingCardRef.value && rankingCardRef.value.resetNumberRoll) {
+    rankingCardRef.value.resetNumberRoll()
+  }
+  
+  // 延迟一点时间再触发，让用户看到滚动效果
+  setTimeout(() => {
+    if (rankingCardRef.value && rankingCardRef.value.startNumberRoll) {
+      rankingCardRef.value.startNumberRoll()
+    }
+    // 滚动完成后重置状态锁
+    setTimeout(() => {
+      isNumberRollInProgress.value = false
+    }, 1000) // 假设滚动动画需要1秒
   }, 300)
   }, 300)
 }
 }
 </script>
 </script>