tweak MkPullToRefresh
This commit is contained in:
parent
f0544ede87
commit
e7c170cf0c
|
@ -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;
|
||||||
|
|
Loading…
Reference in New Issue