Skip to content

useSwipe

类别
导出体积
1.02 kB
上次更改
last week

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

示例

向右滑动

方向:none
水平长度:0 | 垂直长度:0

用法

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
">
在这里滑动 </
div
>
</template>

类型声明

ts
export type 
UseSwipeDirection
= "up" | "down" | "left" | "right" | "none"
export interface UseSwipeOptions extends ConfigurableWindow { /** * 将事件注册为被动事件 * * @default true */
passive
?: boolean
/** * @default 50 */
threshold
?: number
/** * 滑动开始时的回调函数 */
onSwipeStart
?: (
e
: TouchEvent) => void
/** * 滑动过程中的回调函数 */
onSwipe
?: (
e
: TouchEvent) => void
/** * 滑动结束时的回调函数 */
onSwipeEnd
?: (
e
: TouchEvent,
direction
:
UseSwipeDirection
) => void
} export interface UseSwipeReturn {
isSwiping
:
ShallowRef
<boolean>
direction
:
ComputedRef
<
UseSwipeDirection
>
coordsStart
:
Readonly
<
Position
>
coordsEnd
:
Readonly
<
Position
>
lengthX
:
ComputedRef
<number>
lengthY
:
ComputedRef
<number>
stop
: () => void
} /** * 响应式滑动检测。 * * @see https://vueuse.org/useSwipe * @param target * @param options */ export declare function
useSwipe
(
target
:
MaybeRefOrGetter
<EventTarget | null | undefined>,
options
?: UseSwipeOptions,
): UseSwipeReturn

源码

源码演示文档

贡献者

Anthony Fu
一纸忘忧
IlyaL
Anthony Fu
丶远方
Amirreza Zarkesh
lstoeferle
青椒肉丝
SerKo
Fernando Fernández
Alexey Istomin
Jelf
云游君
Shinigami
Alex Kozack

更新日志

620a9 - feat!: remove isPassiveEventSupported (#4886)
7432f - feat(types): deprecate MaybeRef and MaybeRefOrGetter in favor of Vue's native (#4636)
dd316 - feat: use passive event handlers everywhere is possible (#4477)
0a9ed - feat!: drop Vue 2 support, optimize bundles and clean up (#4349)
1bb54 - fix: allow vertical scrolling during swipe (#4323)
fccf2 - feat: upgrade deps (#3614)