Skip to content

useSwipe

基于 TouchEvents 的反应式滑动检测。

¥Reactive swipe detection based on TouchEvents.

示例

Swipe right

Direction: none
lengthX: 0 | lengthY: 0

用法

¥Usage

vue
<script setup lang="ts">
import { 
useSwipe
} from '@vueuse/core'
import {
useTemplateRef
} from 'vue'
const
el
=
useTemplateRef
('el')
const {
isSwiping
,
direction
} =
useSwipe
(
el
)
</script> <template> <
div
ref
="
el
">
Swipe here </
div
>
</template>

类型声明

显示类型声明
ts
export type 
UseSwipeDirection
= "up" | "down" | "left" | "right" | "none"
export interface UseSwipeOptions extends ConfigurableWindow { /** * Register events as passive * * @default true */
passive
?: boolean
/** * @default 50 */
threshold
?: number
/** * Callback on swipe start */
onSwipeStart
?: (
e
: TouchEvent) => void
/** * Callback on swipe moves */
onSwipe
?: (
e
: TouchEvent) => void
/** * Callback on swipe ends */
onSwipeEnd
?: (
e
: TouchEvent,
direction
:
UseSwipeDirection
) => void
} export interface UseSwipeReturn { /** * @deprecated No longer need this Vue 3's browser targets all supporting passive event listeners. * * This flag will always return `true` and be removed in the next major version. */
isPassiveEventSupported
: boolean
isSwiping
:
ShallowRef
<boolean>
direction
:
ComputedRef
<
UseSwipeDirection
>
coordsStart
:
Readonly
<
Position
>
coordsEnd
:
Readonly
<
Position
>
lengthX
:
ComputedRef
<number>
lengthY
:
ComputedRef
<number>
stop
: () => void
} /** * Reactive swipe detection. * * @see https://vueuse.org/useSwipe * @param target * @param options */ export declare function
useSwipe
(
target
:
MaybeRefOrGetter
<EventTarget | null | undefined>,
options
?: UseSwipeOptions,
): UseSwipeReturn

源代码

源代码示例文档

变更日志

最近没有更改