diff --git a/frontend/pages/square/components/WaterfallGrid.vue b/frontend/pages/square/components/WaterfallGrid.vue index 68aa729..8bc57bb 100644 --- a/frontend/pages/square/components/WaterfallGrid.vue +++ b/frontend/pages/square/components/WaterfallGrid.vue @@ -75,7 +75,7 @@ const props = defineProps({ isActive: { type: Boolean, default: true }, // 是否处于激活状态 }) -const emit = defineEmits(['cardClick']) +const emit = defineEmits(['cardClick', 'scroll']) // ========== 布局常量 ========== const rpx2px = (rpx) => Math.round(uni.getSystemInfoSync().windowWidth / 750 * rpx) @@ -121,18 +121,44 @@ const iosScrollPaused = ref(true) const startIOSAutoScroll = () => { if (!isComponentMounted || !isIOS) return iosScrollPaused.value = false + + // 启动 iOS 滚动位置追踪,定时发送 scrollLeft 给父组件 + clearInterval(iosScrollEmitTimer) + iosScrollEmitTimer = setInterval(() => { + if (!isComponentMounted) return + // iOS CSS 动画从 0 到 totalWidth.value,循环播放 + const scrollDist = totalWidth.value + const duration = scrollDist / AUTO_SCROLL_SPEED_IOS + const elapsed = (Date.now() % duration) + const pos = (elapsed / duration) * scrollDist + emit('scroll', pos) + }, 16) } const stopIOSAutoScroll = () => { iosScrollPaused.value = true + clearInterval(iosScrollEmitTimer) + iosScrollEmitTimer = null } const pauseIOSAutoScroll = () => { iosScrollPaused.value = true + clearInterval(iosScrollEmitTimer) + iosScrollEmitTimer = null } const resumeIOSAutoScroll = () => { iosScrollPaused.value = false + // 重新启动 iOS 滚动位置追踪 + clearInterval(iosScrollEmitTimer) + iosScrollEmitTimer = setInterval(() => { + if (!isComponentMounted) return + const scrollDist = totalWidth.value + const duration = scrollDist / AUTO_SCROLL_SPEED_IOS + const elapsed = (Date.now() % duration) + const pos = (elapsed / duration) * scrollDist + emit('scroll', pos) + }, 16) } let rafId = null let userInteracting = false @@ -141,6 +167,8 @@ let appendTimer = null // 防抖定时器 let autoScrollPos = 0 // 自动滚动目标位置 let momentumTimer = null // iOS/Android 惯性滚动检测定时器 let scrollUpdateTimer = null // 定期同步 scrollLeft 的定时器(仅 Android) +let iosScrollEmitTimer = null // iOS 滚动位置发射定时器 +let iosCurrentScrollPos = 0 // iOS CSS 动画当前滚动位置 const startAutoScroll = () => { if (!isComponentMounted || isIOS) return @@ -269,6 +297,9 @@ const onScroll = (e) => { if (!isComponentMounted) return currentScrollLeft = e.detail.scrollLeft + // 发送滚动事件给父组件用于背景视差 + emit('scroll', currentScrollLeft) + // iOS 手动滚动时,不再更新自动滚动相关变量 if (isIOS && isManualScrolling) { return diff --git a/frontend/pages/square/square.vue b/frontend/pages/square/square.vue index ccd0917..27607b8 100644 --- a/frontend/pages/square/square.vue +++ b/frontend/pages/square/square.vue @@ -1,7 +1,14 @@