diff --git a/packages/frontend/src/components/MkPullToRefresh.vue b/packages/frontend/src/components/MkPullToRefresh.vue index 0b5ae8e826..c38d0ff6a1 100644 --- a/packages/frontend/src/components/MkPullToRefresh.vue +++ b/packages/frontend/src/components/MkPullToRefresh.vue @@ -5,7 +5,7 @@ SPDX-License-Identifier: AGPL-3.0-only <template> <div ref="rootEl"> - <div v-if="isPullStart" :class="$style.frame" :style="`--frame-min-height: ${currentHeight / 3}px;`"> + <div v-if="isPullStart" :class="$style.frame" :style="`--frame-min-height: ${pullDistance / (PULL_BRAKE_BASE + (pullDistance / PULL_BRAKE_FACTOR))}px;`"> <div :class="$style.frameContent"> <MkLoading v-if="isRefreshing" :class="$style.loader" :em="true"/> <i v-else class="ti ti-arrow-bar-to-down" :class="[$style.icon, { [$style.refresh]: isPullEnd }]"></i> @@ -29,13 +29,15 @@ import { i18n } from '@/i18n.js'; const SCROLL_STOP = 10; const MAX_PULL_DISTANCE = Infinity; -const FIRE_THRESHOLD = 200; +const FIRE_THRESHOLD = 230; const RELEASE_TRANSITION_DURATION = 200; +const PULL_BRAKE_BASE = 2; +const PULL_BRAKE_FACTOR = 200; let isPullStart = $ref(false); let isPullEnd = $ref(false); let isRefreshing = $ref(false); -let currentHeight = $ref(0); +let pullDistance = $ref(0); let supportPointerDesktop = false; let startScreenY: number | null = null; @@ -72,14 +74,14 @@ function moveStart(event) { if (!isPullStart && !isRefreshing && !disabled) { isPullStart = true; startScreenY = getScreenY(event); - currentHeight = 0; + pullDistance = 0; } } function moveBySystem(to: number): Promise<void> { return new Promise(r => { - const startHeight = currentHeight; - const overHeight = currentHeight - to; + const startHeight = pullDistance; + const overHeight = pullDistance - to; if (overHeight < 1) { r(); return; @@ -88,26 +90,26 @@ function moveBySystem(to: number): Promise<void> { let intervalId = setInterval(() => { const time = Date.now() - startTime; if (time > RELEASE_TRANSITION_DURATION) { - currentHeight = to; + pullDistance = to; clearInterval(intervalId); r(); return; } const nextHeight = startHeight - (overHeight / RELEASE_TRANSITION_DURATION) * time; - if (currentHeight < nextHeight) return; - currentHeight = nextHeight; + if (pullDistance < nextHeight) return; + pullDistance = nextHeight; }, 1); }); } async function fixOverContent() { - if (currentHeight > FIRE_THRESHOLD) { + if (pullDistance > FIRE_THRESHOLD) { await moveBySystem(FIRE_THRESHOLD); } } async function closeContent() { - if (currentHeight > 0) { + if (pullDistance > 0) { await moveBySystem(0); } } @@ -131,8 +133,8 @@ function moving(event) { if (!scrollEl) { scrollEl = getScrollableParentElement(rootEl); } - if ((scrollEl?.scrollTop ?? 0) > (supportPointerDesktop ? SCROLL_STOP : SCROLL_STOP + currentHeight)) { - currentHeight = 0; + if ((scrollEl?.scrollTop ?? 0) > (supportPointerDesktop ? SCROLL_STOP : SCROLL_STOP + pullDistance)) { + pullDistance = 0; isPullEnd = false; moveEnd(); return; @@ -144,9 +146,9 @@ function moving(event) { const moveScreenY = getScreenY(event); const moveHeight = moveScreenY - startScreenY!; - currentHeight = Math.min(Math.max(moveHeight, 0), MAX_PULL_DISTANCE); + pullDistance = Math.min(Math.max(moveHeight, 0), MAX_PULL_DISTANCE); - isPullEnd = currentHeight >= FIRE_THRESHOLD; + isPullEnd = pullDistance >= FIRE_THRESHOLD; } /**