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

PullDownToRefresh: reset the state if invisible

Browse source
This commit is contained in:
thislight 2024-10-09 15:15:22 +08:00
parent 08a196a3bf
commit e2dbb2f128
1 changed files with 17 additions and 7 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

24
src/timelines/PullDownToRefresh.tsx
View file

@ -28,7 +28,7 @@ const PullDownToRefresh: Component<{
let rootElement: HTMLDivElement; let rootElement: HTMLDivElement;
const [pullDown, setPullDown] = createSignal(0); const [pullDown, setPullDown] = createSignal(0);
const stopPos = () => 160 const stopPos = () => 160;
const indicatorOfsY = () => { const indicatorOfsY = () => {
if (props.loading) { if (props.loading) {
@ -43,12 +43,16 @@ const PullDownToRefresh: Component<{
const rootVisible = obvx(() => rootElement); const rootVisible = obvx(() => rootElement);
createEffect(() => {
if (!rootVisible()) setPullDown(0);
});
let released = true; let released = true;
let v = 0; let v = 0;
let lts = -1; let lts = -1;
let ds = 0; let ds = 0;
let holding = false; let holding = false;
const K = 5; const K = 10;
const updatePullDown = (ts: number) => { const updatePullDown = (ts: number) => {
released = false; released = false;
try { try {
@ -90,9 +94,10 @@ const PullDownToRefresh: Component<{
const handleLinkedWheel = (event: WheelEvent) => { const handleLinkedWheel = (event: WheelEvent) => {
const scrollTop = (event.target as HTMLElement).scrollTop; const scrollTop = (event.target as HTMLElement).scrollTop;
if (scrollTop >= 0 && scrollTop < 1) { if (scrollTop >= 0 && scrollTop < 1) {
event.preventDefault() const d = untrack(pullDown);
if (event.deltaY <= 0 || d > 0) event.preventDefault();
ds = -(event.deltaY / window.devicePixelRatio / 2); ds = -(event.deltaY / window.devicePixelRatio / 2);
holding = untrack(pullDown) < stopPos(); holding = d < stopPos();
if (wheelTimeout) { if (wheelTimeout) {
clearTimeout(wheelTimeout); clearTimeout(wheelTimeout);
} }
@ -124,15 +129,16 @@ const PullDownToRefresh: Component<{
return; return;
} }
const item = event.targetTouches.item(0)!; const item = event.targetTouches.item(0)!;
event.preventDefault(); if (untrack(pullDown) > 0) event.preventDefault();
if (lastTouchId && item.identifier !== lastTouchId) { if (lastTouchId && item.identifier !== lastTouchId) {
lastTouchId = undefined; lastTouchId = undefined;
lastTouchScreenY = 0; lastTouchScreenY = 0;
return; return;
} }
holding = true; holding = true;
if (lastTouchScreenY !== 0) { if (lastTouchScreenY !== 0) {
ds = (item.screenY - lastTouchScreenY) ; ds = item.screenY - lastTouchScreenY;
} }
lastTouchScreenY = item.screenY; lastTouchScreenY = item.screenY;
if (released) { if (released) {
@ -145,7 +151,11 @@ const PullDownToRefresh: Component<{
lastTouchId = undefined; lastTouchId = undefined;
lastTouchScreenY = 0; lastTouchScreenY = 0;
holding = false; holding = false;
if (untrack(indicatorOfsY) >= 160 && !props.loading && props.onRefresh) { if (
untrack(indicatorOfsY) >= stopPos() &&
!props.loading &&
props.onRefresh
) {
setTimeout(props.onRefresh, 0); setTimeout(props.onRefresh, 0);
} else { } else {
if (released) { if (released) {