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

42
src/timelines/PullDownToRefresh.tsx
View file

@ -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;
}