mirror of
https://github.com/kokonect-link/cherrypick
synced 2024-12-04 01:38:54 +09:00
fix: pull to refresh
This commit is contained in:
parent
3d9ca5d70a
commit
3558b335f4
@ -1,5 +1,5 @@
|
|||||||
<template>
|
<template>
|
||||||
<div ref="rootEl" :class="$style.root">
|
<div ref="rootEl">
|
||||||
<div v-if="isPullStart" :class="$style.frame" :style="`--frame-min-height: ${currentHeight}px;`">
|
<div v-if="isPullStart" :class="$style.frame" :style="`--frame-min-height: ${currentHeight}px;`">
|
||||||
<div :class="$style.contents">
|
<div :class="$style.contents">
|
||||||
<i v-if="!isRefreshing" :class="['ti', 'ti-arrow-bar-to-down', { [$style.refresh]: isPullEnd }]"></i>
|
<i v-if="!isRefreshing" :class="['ti', 'ti-arrow-bar-to-down', { [$style.refresh]: isPullEnd }]"></i>
|
||||||
@ -9,12 +9,14 @@
|
|||||||
<p v-else>{{ i18n.ts.pullDownToRefresh }}</p>
|
<p v-else>{{ i18n.ts.pullDownToRefresh }}</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<slot />
|
<div :class="{ [$style.slotClip]: isPullStart }">
|
||||||
|
<slot />
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script lang="ts" setup>
|
<script lang="ts" setup>
|
||||||
import { onMounted } from 'vue';
|
import { onMounted, onUnmounted } from 'vue';
|
||||||
import { deviceKind } from '@/scripts/device-kind.js';
|
import { deviceKind } from '@/scripts/device-kind.js';
|
||||||
import { i18n } from '@/i18n.js';
|
import { i18n } from '@/i18n.js';
|
||||||
|
|
||||||
@ -153,7 +155,8 @@ onMounted(() => {
|
|||||||
|
|
||||||
if (supportPointerDesktop) {
|
if (supportPointerDesktop) {
|
||||||
rootEl.addEventListener('pointerdown', moveStart);
|
rootEl.addEventListener('pointerdown', moveStart);
|
||||||
rootEl.addEventListener('pointerup', moveEnd);
|
// ポインターの場合、ポップアップ系の動作をするとdownだけ発火されてupが発火されないため
|
||||||
|
window.addEventListener('pointerup', moveEnd);
|
||||||
rootEl.addEventListener('pointermove', moving, {passive: true});
|
rootEl.addEventListener('pointermove', moving, {passive: true});
|
||||||
}
|
}
|
||||||
else {
|
else {
|
||||||
@ -163,6 +166,10 @@ onMounted(() => {
|
|||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
|
onUnmounted(() => {
|
||||||
|
if (supportPointerDesktop) window.removeEventListener('pointerup', moveEnd);
|
||||||
|
});
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* emit(refresh)が完了したことを知らせる関数
|
* emit(refresh)が完了したことを知らせる関数
|
||||||
*
|
*
|
||||||
@ -232,4 +239,8 @@ defineExpose({
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.slotClip {
|
||||||
|
overflow-y: clip;
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
|
Loading…
Reference in New Issue
Block a user