PullDownToRefresh: reset the state if invisible
All checks were successful
/ depoly (push) Successful in 1m13s
All checks were successful
/ depoly (push) Successful in 1m13s
This commit is contained in:
parent
ee39cf8651
commit
49b7f2891b
1 changed files with 17 additions and 7 deletions
|
@ -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) {
|
||||||
|
|
Loading…
Reference in a new issue