fix:修改瀑布流ios的抖动现象
This commit is contained in:
parent
36e36b07c2
commit
e81ef0a375
@ -1,3 +1 @@
|
||||
# TopFans
|
||||
密码:R251Y>Y8inL_BM=W
|
||||
https://testflight.apple.com/join/znR5FGdG
|
||||
@ -5,6 +5,7 @@
|
||||
scroll-x
|
||||
:show-scrollbar="false"
|
||||
:scroll-left="isIOS ? undefined : scrollLeft"
|
||||
:bounce="false"
|
||||
@scroll="onScroll"
|
||||
@touchstart="onTouchStart"
|
||||
@touchend="onTouchEnd"
|
||||
@ -224,8 +225,8 @@ let isManualScrolling = false // 是否正在手动滚动
|
||||
|
||||
const onTouchStart = (e) => {
|
||||
if (isIOS) {
|
||||
// iOS 设备:完全停止自动滚动
|
||||
stopIOSAutoScroll()
|
||||
// iOS 设备:暂停 CSS 动画,让用户可以自由滚动
|
||||
pauseIOSAutoScroll()
|
||||
isManualScrolling = true
|
||||
clearTimeout(momentumTimer)
|
||||
} else {
|
||||
@ -244,13 +245,12 @@ const onTouchEnd = () => {
|
||||
const tick = () => {
|
||||
momentumTimer = setTimeout(() => {
|
||||
if (Math.abs(currentScrollLeft - lastTouchEndPos) < 2) {
|
||||
// 惯性真正结束,延迟 300ms 再恢复自动滚动(确保惯性完全停止)
|
||||
// 惯性真正结束,等 500ms 确保惯性完全停止后再恢复
|
||||
clearTimeout(momentumTimer)
|
||||
momentumTimer = setTimeout(() => {
|
||||
isManualScrolling = false
|
||||
autoScrollPos = currentScrollLeft
|
||||
startIOSAutoScroll()
|
||||
}, 300)
|
||||
resumeIOSAutoScroll()
|
||||
}, 1500)
|
||||
} else {
|
||||
// 惯性中,更新快照继续检测
|
||||
lastTouchEndPos = currentScrollLeft
|
||||
@ -951,6 +951,7 @@ const loadUsersAndStartScroll = () => {
|
||||
<style scoped>
|
||||
.waterfall-scroll {
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.waterfall-inner {
|
||||
@ -962,7 +963,6 @@ const loadUsersAndStartScroll = () => {
|
||||
|
||||
.ios-css-animate {
|
||||
animation: iosAutoScroll var(--anim-duration) linear infinite;
|
||||
animation-play-state: var(--play-state, running);
|
||||
}
|
||||
|
||||
@keyframes iosAutoScroll {
|
||||
|
||||
Loading…
Reference in New Issue
Block a user