Rubicon/tutu
1
0
Fork 0
Code Issues 19 Pull requests Projects Activity Actions

PullDownToRefresh: fix the trigger

Browse source
This commit is contained in:
thislight 2024-10-12 19:05:52 +08:00
parent 8f2b0cb489
commit a08426d0d1
No known key found for this signature in database
GPG key ID: A50F9451AC56A63E
1 changed files with 20 additions and 22 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

40
src/timelines/PullDownToRefresh.tsx
View file

@ -52,7 +52,7 @@ const PullDownToRefresh: Component<{
let lts = -1; let lts = -1;
let ds = 0; let ds = 0;
let holding = false; let holding = false;
const K = 10; const K = 20;
const updatePullDown = (ts: number) => { const updatePullDown = (ts: number) => {
released = false; released = false;
try { try {
@ -60,8 +60,9 @@ const PullDownToRefresh: Component<{
const dt = lts !== -1 ? ts - lts : 1 / 60; const dt = lts !== -1 ? ts - lts : 1 / 60;
const vspring = holding ? 0 : K * x * dt; const vspring = holding ? 0 : K * x * dt;
v = ds / dt - vspring; 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) { if (Math.abs(x) > 1 || Math.abs(v) > 1) {
requestAnimationFrame(updatePullDown); requestAnimationFrame(updatePullDown);
@ -69,15 +70,6 @@ const PullDownToRefresh: Component<{
v = 0; v = 0;
lts = -1; lts = -1;
} }
if (
!holding &&
untrack(pullDown) >= stopPos() &&
!props.loading &&
props.onRefresh
) {
setTimeout(props.onRefresh, 0);
}
} finally { } finally {
ds = 0; ds = 0;
released = true; released = true;
@ -89,6 +81,11 @@ const PullDownToRefresh: Component<{
const onWheelNotUpdated = () => { const onWheelNotUpdated = () => {
wheelTimeout = undefined; wheelTimeout = undefined;
holding = false; holding = false;
if (released) {
released = false;
requestAnimationFrame(updatePullDown);
}
}; };
const handleLinkedWheel = (event: WheelEvent) => { const handleLinkedWheel = (event: WheelEvent) => {
@ -97,11 +94,18 @@ const PullDownToRefresh: Component<{
const d = untrack(pullDown); const d = untrack(pullDown);
if (d > 1) event.preventDefault(); if (d > 1) event.preventDefault();
ds = -(event.deltaY / window.devicePixelRatio / 2); ds = -(event.deltaY / window.devicePixelRatio / 2);
holding = d < stopPos();
if (wheelTimeout) { if (wheelTimeout) {
clearTimeout(wheelTimeout); clearTimeout(wheelTimeout);
} }
if (d >= stopPos() && !props.loading) {
props.onRefresh?.();
holding = false;
wheelTimeout = undefined;
} else {
holding = true;
wheelTimeout = setTimeout(onWheelNotUpdated, 200); wheelTimeout = setTimeout(onWheelNotUpdated, 200);
}
if (released) { if (released) {
released = false; released = false;
@ -151,12 +155,8 @@ const PullDownToRefresh: Component<{
lastTouchId = undefined; lastTouchId = undefined;
lastTouchScreenY = 0; lastTouchScreenY = 0;
holding = false; holding = false;
if ( if (untrack(pullDown) >= stopPos() && !props.loading) {
untrack(indicatorOfsY) >= stopPos() && props.onRefresh?.();
!props.loading &&
props.onRefresh
) {
setTimeout(props.onRefresh, 0);
} else { } else {
if (released) { if (released) {
released = false; released = false;
@ -203,9 +203,7 @@ const PullDownToRefresh: Component<{
background-color: var(--tutu-color-surface); background-color: var(--tutu-color-surface);
> :global(.refresh-icon) { > :global(.refresh-icon) {
transform: rotate( transform: rotate(${`${(indicatorOfsY() / 160 / 2).toString()}turn`});
${`${((indicatorOfsY() / 160) * 180).toString()}deg`}
);
will-change: transform; will-change: transform;
} }