tweak MkPullToRefresh
This commit is contained in:
parent
7015cc937b
commit
52dbab56a4
|
@ -5,7 +5,7 @@ SPDX-License-Identifier: AGPL-3.0-only
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<div ref="rootEl">
|
<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">
|
<div :class="$style.frameContent">
|
||||||
<MkLoading v-if="isRefreshing" :class="$style.loader" :em="true"/>
|
<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>
|
<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 SCROLL_STOP = 10;
|
||||||
const MAX_PULL_DISTANCE = Infinity;
|
const MAX_PULL_DISTANCE = Infinity;
|
||||||
const FIRE_THRESHOLD = 200;
|
const FIRE_THRESHOLD = 230;
|
||||||
const RELEASE_TRANSITION_DURATION = 200;
|
const RELEASE_TRANSITION_DURATION = 200;
|
||||||
|
const PULL_BRAKE_BASE = 2;
|
||||||
|
const PULL_BRAKE_FACTOR = 200;
|
||||||
|
|
||||||
let isPullStart = $ref(false);
|
let isPullStart = $ref(false);
|
||||||
let isPullEnd = $ref(false);
|
let isPullEnd = $ref(false);
|
||||||
let isRefreshing = $ref(false);
|
let isRefreshing = $ref(false);
|
||||||
let currentHeight = $ref(0);
|
let pullDistance = $ref(0);
|
||||||
|
|
||||||
let supportPointerDesktop = false;
|
let supportPointerDesktop = false;
|
||||||
let startScreenY: number | null = null;
|
let startScreenY: number | null = null;
|
||||||
|
@ -72,14 +74,14 @@ function moveStart(event) {
|
||||||
if (!isPullStart && !isRefreshing && !disabled) {
|
if (!isPullStart && !isRefreshing && !disabled) {
|
||||||
isPullStart = true;
|
isPullStart = true;
|
||||||
startScreenY = getScreenY(event);
|
startScreenY = getScreenY(event);
|
||||||
currentHeight = 0;
|
pullDistance = 0;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
function moveBySystem(to: number): Promise<void> {
|
function moveBySystem(to: number): Promise<void> {
|
||||||
return new Promise(r => {
|
return new Promise(r => {
|
||||||
const startHeight = currentHeight;
|
const startHeight = pullDistance;
|
||||||
const overHeight = currentHeight - to;
|
const overHeight = pullDistance - to;
|
||||||
if (overHeight < 1) {
|
if (overHeight < 1) {
|
||||||
r();
|
r();
|
||||||
return;
|
return;
|
||||||
|
@ -88,26 +90,26 @@ function moveBySystem(to: number): Promise<void> {
|
||||||
let intervalId = setInterval(() => {
|
let intervalId = setInterval(() => {
|
||||||
const time = Date.now() - startTime;
|
const time = Date.now() - startTime;
|
||||||
if (time > RELEASE_TRANSITION_DURATION) {
|
if (time > RELEASE_TRANSITION_DURATION) {
|
||||||
currentHeight = to;
|
pullDistance = to;
|
||||||
clearInterval(intervalId);
|
clearInterval(intervalId);
|
||||||
r();
|
r();
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
const nextHeight = startHeight - (overHeight / RELEASE_TRANSITION_DURATION) * time;
|
const nextHeight = startHeight - (overHeight / RELEASE_TRANSITION_DURATION) * time;
|
||||||
if (currentHeight < nextHeight) return;
|
if (pullDistance < nextHeight) return;
|
||||||
currentHeight = nextHeight;
|
pullDistance = nextHeight;
|
||||||
}, 1);
|
}, 1);
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
async function fixOverContent() {
|
async function fixOverContent() {
|
||||||
if (currentHeight > FIRE_THRESHOLD) {
|
if (pullDistance > FIRE_THRESHOLD) {
|
||||||
await moveBySystem(FIRE_THRESHOLD);
|
await moveBySystem(FIRE_THRESHOLD);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
async function closeContent() {
|
async function closeContent() {
|
||||||
if (currentHeight > 0) {
|
if (pullDistance > 0) {
|
||||||
await moveBySystem(0);
|
await moveBySystem(0);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -131,8 +133,8 @@ function moving(event) {
|
||||||
if (!scrollEl) {
|
if (!scrollEl) {
|
||||||
scrollEl = getScrollableParentElement(rootEl);
|
scrollEl = getScrollableParentElement(rootEl);
|
||||||
}
|
}
|
||||||
if ((scrollEl?.scrollTop ?? 0) > (supportPointerDesktop ? SCROLL_STOP : SCROLL_STOP + currentHeight)) {
|
if ((scrollEl?.scrollTop ?? 0) > (supportPointerDesktop ? SCROLL_STOP : SCROLL_STOP + pullDistance)) {
|
||||||
currentHeight = 0;
|
pullDistance = 0;
|
||||||
isPullEnd = false;
|
isPullEnd = false;
|
||||||
moveEnd();
|
moveEnd();
|
||||||
return;
|
return;
|
||||||
|
@ -144,9 +146,9 @@ function moving(event) {
|
||||||
const moveScreenY = getScreenY(event);
|
const moveScreenY = getScreenY(event);
|
||||||
|
|
||||||
const moveHeight = moveScreenY - startScreenY!;
|
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;
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
|
Loading…
Reference in New Issue