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