feat: 修改瀑布流ios抖动现象

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
     }
 
+    // 父组件通过 key 变化来重置组件，这里不需要额外处理
+    // 延迟加载数据
+    setTimeout(() => {
+      loadUsersAndStartScroll()
+    }, 0)
+  }
+})
+
+const loadUsersAndStartScroll = () => {
   loadUsers().then(() => {
     nextTick(() => {
       if (isIOS) {
-          startIOSAutoScroll()
+        // iOS 启动自动滚动
+        iosScrollPaused.value = false
       } else {
         startAutoScroll()
       }
     })
   })
-  }
-})
+}
 </script>
 
 <style scoped>

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)