From a08426d0d1449fb5c7fb1021182bb0d99b226132 Mon Sep 17 00:00:00 2001 From: thislight Date: Sat, 12 Oct 2024 19:05:52 +0800 Subject: [PATCH] PullDownToRefresh: fix the trigger --- src/timelines/PullDownToRefresh.tsx | 42 ++++++++++++++--------------- 1 file changed, 20 insertions(+), 22 deletions(-) diff --git a/src/timelines/PullDownToRefresh.tsx b/src/timelines/PullDownToRefresh.tsx index 55859e5..1c80829 100644 --- a/src/timelines/PullDownToRefresh.tsx +++ b/src/timelines/PullDownToRefresh.tsx @@ -52,7 +52,7 @@ const PullDownToRefresh: Component<{ let lts = -1; let ds = 0; let holding = false; - const K = 10; + const K = 20; const updatePullDown = (ts: number) => { released = false; try { @@ -60,8 +60,9 @@ const PullDownToRefresh: Component<{ const dt = lts !== -1 ? ts - lts : 1 / 60; const vspring = holding ? 0 : K * x * dt; v = ds / dt - vspring; + const final = Math.max(Math.min(x + v * dt, stopPos()), 0); - setPullDown(Math.max(Math.min(x + v * dt, stopPos()), 0)); + setPullDown(final); if (Math.abs(x) > 1 || Math.abs(v) > 1) { requestAnimationFrame(updatePullDown); @@ -69,15 +70,6 @@ const PullDownToRefresh: Component<{ v = 0; lts = -1; } - - if ( - !holding && - untrack(pullDown) >= stopPos() && - !props.loading && - props.onRefresh - ) { - setTimeout(props.onRefresh, 0); - } } finally { ds = 0; released = true; @@ -89,6 +81,11 @@ const PullDownToRefresh: Component<{ const onWheelNotUpdated = () => { wheelTimeout = undefined; holding = false; + + if (released) { + released = false; + requestAnimationFrame(updatePullDown); + } }; const handleLinkedWheel = (event: WheelEvent) => { @@ -97,11 +94,18 @@ const PullDownToRefresh: Component<{ const d = untrack(pullDown); if (d > 1) event.preventDefault(); ds = -(event.deltaY / window.devicePixelRatio / 2); - holding = d < stopPos(); if (wheelTimeout) { clearTimeout(wheelTimeout); } - wheelTimeout = setTimeout(onWheelNotUpdated, 200); + if (d >= stopPos() && !props.loading) { + props.onRefresh?.(); + + holding = false; + wheelTimeout = undefined; + } else { + holding = true; + wheelTimeout = setTimeout(onWheelNotUpdated, 200); + } if (released) { released = false; @@ -151,12 +155,8 @@ const PullDownToRefresh: Component<{ lastTouchId = undefined; lastTouchScreenY = 0; holding = false; - if ( - untrack(indicatorOfsY) >= stopPos() && - !props.loading && - props.onRefresh - ) { - setTimeout(props.onRefresh, 0); + if (untrack(pullDown) >= stopPos() && !props.loading) { + props.onRefresh?.(); } else { if (released) { released = false; @@ -203,9 +203,7 @@ const PullDownToRefresh: Component<{ background-color: var(--tutu-color-surface); > :global(.refresh-icon) { - transform: rotate( - ${`${((indicatorOfsY() / 160) * 180).toString()}deg`} - ); + transform: rotate(${`${(indicatorOfsY() / 160 / 2).toString()}turn`}); will-change: transform; }