tweak MkPullToRefresh

This commit is contained in:
syuilo 2025-05-03 18:35:43 +09:00
parent f0544ede87
commit e7c170cf0c
1 changed files with 8 additions and 5 deletions

View File

@ -4,7 +4,7 @@ SPDX-License-Identifier: AGPL-3.0-only
--> -->
<template> <template>
<div ref="rootEl"> <div ref="rootEl" :class="isPulling ? $style.isPulling : null">
<div v-if="isPulling" :class="$style.frame" :style="`--frame-min-height: ${pullDistance / (PULL_BRAKE_BASE + (pullDistance / PULL_BRAKE_FACTOR))}px;`"> <div v-if="isPulling" :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"/>
@ -204,20 +204,23 @@ function refreshFinished() {
onMounted(() => { onMounted(() => {
if (rootEl.value == null) return; if (rootEl.value == null) return;
scrollEl = getScrollContainer(rootEl.value); scrollEl = getScrollContainer(rootEl.value);
lockDownScroll();
rootEl.value.addEventListener('pointerdown', moveStart, { passive: true }); rootEl.value.addEventListener('pointerdown', moveStart, { passive: true });
rootEl.value.addEventListener('touchend', toggleScrollLockOnTouchEnd, { passive: true }); rootEl.value.addEventListener('touchend', toggleScrollLockOnTouchEnd, { passive: true });
}); });
onUnmounted(() => { onUnmounted(() => {
rootEl.value.removeEventListener('pointerdown', moveStart); if (rootEl.value) rootEl.value.removeEventListener('pointerdown', moveStart);
rootEl.value.removeEventListener('touchend', toggleScrollLockOnTouchEnd); if (rootEl.value) rootEl.value.removeEventListener('touchend', toggleScrollLockOnTouchEnd);
}); });
</script> </script>
<style lang="scss" module> <style lang="scss" module>
.isPulling {
will-change: contents;
}
.frame { .frame {
position: relative; position: relative;
overflow: clip; overflow: clip;