From 36e36b07c2fad64675bbaea7af9f00cfe6d55f4f Mon Sep 17 00:00:00 2001
From: zerosaturation <zerosaturation@163.com>
Date: Tue, 12 May 2026 22:53:09 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E4=BF=AE=E6=94=B9=E7=80=91=E5=B8=83?=
 =?UTF-8?q?=E6=B5=81ios=E6=8A=96=E5=8A=A8=E7=8E=B0=E8=B1=A1?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../pages/square/components/WaterfallGrid.vue | 46 +++++++++++--------
 frontend/pages/square/square.vue              | 10 +++-
 2 files changed, 37 insertions(+), 19 deletions(-)

diff --git a/frontend/pages/square/components/WaterfallGrid.vue b/frontend/pages/square/components/WaterfallGrid.vue
index 2ef88b4..b399161 100644
--- a/frontend/pages/square/components/WaterfallGrid.vue
+++ b/frontend/pages/square/components/WaterfallGrid.vue
@@ -11,6 +11,7 @@
     @touchcancel="onTouchEnd"
   >
     <view
+      ref="waterfallInnerRef"
       class="waterfall-inner ios-css-animate"
       :style="innerStyle"
     >
@@ -114,23 +115,23 @@ const cafFn = (id) => {
 
 // ========== iOS CSS 动画自动滚动 ==========
 // iOS 使用 CSS @keyframes 动画实现流畅滚动，不再用 setInterval + scroll-left
-let iosScrollPaused = false
+const iosScrollPaused = ref(true)
 
 const startIOSAutoScroll = () => {
   if (!isComponentMounted || !isIOS) return
-  iosScrollPaused = false
+  iosScrollPaused.value = false
 }
 
 const stopIOSAutoScroll = () => {
-  iosScrollPaused = true
+  iosScrollPaused.value = true
 }
 
 const pauseIOSAutoScroll = () => {
-  iosScrollPaused = true
+  iosScrollPaused.value = true
 }
 
 const resumeIOSAutoScroll = () => {
-  iosScrollPaused = false
+  iosScrollPaused.value = false
 }
 let rafId = null
 let userInteracting = false
@@ -305,7 +306,9 @@ const innerStyle = computed(() => {
     height: '100%',
     '--scroll-dist': -scrollDist + 'px',
     '--anim-duration': duration + 'ms',
-    '--play-state': iosScrollPaused ? 'paused' : 'running',
+    '--play-state': iosScrollPaused.value ? 'paused' : 'running',
+    // 强制内联样式控制 animation-play-state
+    animationPlayState: iosScrollPaused.value ? 'paused' : 'running',
   }
 })
 
@@ -537,7 +540,7 @@ const batchGetPresignedUrls = async (urls) => {
 }
 
 const loadUsers = async () => {
-  if (!isComponentMounted) return
+  if (!isComponentMounted) return Promise.resolve()
 
   // 切换分类时重置偏移量
   mockDataOffset = 0
@@ -758,13 +761,11 @@ onMounted(() => {
   // 获取设备平台信息，iOS 不使用自动滚动
   const sysInfo = uni.getSystemInfoSync()
   isIOS = sysInfo.platform === 'ios'
-  console.log('[WaterfallGrid] onMounted, platform:', sysInfo.platform, 'isIOS:', isIOS)
   const containerH = props.screenHeight - props.bannerBottom
   layout = new WaterfallLayout(containerH, props.category)
   loadUsers().then(() => {
     isInitialLoading = false
     nextTick(() => {
-      console.log('[WaterfallGrid] loadUsers done, calling auto scroll, isIOS:', isIOS)
       if (isIOS) {
         startIOSAutoScroll()
       } else {
@@ -925,17 +926,26 @@ watch(() => props.category, (newCategory) => {
       rafId = null
     }
 
-    loadUsers().then(() => {
-      nextTick(() => {
-        if (isIOS) {
-          startIOSAutoScroll()
-        } else {
-          startAutoScroll()
-        }
-      })
-    })
+    // 父组件通过 key 变化来重置组件，这里不需要额外处理
+    // 延迟加载数据
+    setTimeout(() => {
+      loadUsersAndStartScroll()
+    }, 0)
   }
 })
+
+const loadUsersAndStartScroll = () => {
+  loadUsers().then(() => {
+    nextTick(() => {
+      if (isIOS) {
+        // iOS 启动自动滚动
+        iosScrollPaused.value = false
+      } else {
+        startAutoScroll()
+      }
+    })
+  })
+}
 </script>
 
 <style scoped>
diff --git a/frontend/pages/square/square.vue b/frontend/pages/square/square.vue
index e7acb22..ccd0917 100644
--- a/frontend/pages/square/square.vue
+++ b/frontend/pages/square/square.vue
@@ -5,6 +5,7 @@
 
     <!-- 横向瀑布流卡片层（内部自带横向滚动） -->
     <WaterfallGrid
+      :key="waterfallKey"
       :screenWidth="screenWidth"
       :screenHeight="screenHeight"
       :bannerBottom="bannerBottomPx"
@@ -59,7 +60,7 @@
 </template>
 
 <script setup>
-import { ref, computed, onMounted, onUnmounted } from 'vue'
+import { ref, computed, watch, onMounted, onUnmounted } from 'vue'
 import { onLoad, onShow, onHide } from '@dcloudio/uni-app'
 import { useStore } from 'vuex'
 import Header from '../components/Header.vue'
@@ -80,10 +81,17 @@ const currentStarId = ref(uni.getStorageSync('star_id') || null)
 
 // ========== UI State ==========
 const activeContentTab = ref('random')
+const waterfallKey = ref(0)  // 用于重新加载 WaterfallGrid
 const navExpanded = ref(false)
 const showRankingModal = ref(false)
 const isActive = ref(true)
 
+// ========== Watch activeContentTab ==========
+watch(activeContentTab, () => {
+  // 切换标签时重置 WaterfallGrid（iOS 需要重新挂载才能重置 CSS 动画）
+  waterfallKey.value++
+})
+
 // ========== Screen Info ==========
 const screenWidth = ref(375)
 const screenHeight = ref(812)