Skip to main content

手势

概述​

🌐 Overview

Ionic Gestures 是一个工具，允许开发者以平台无关的方式为他们的应用创建自定义手势和交互。开发者不需要使用特定的框架，如 React 或 Angular，甚至不需要构建 Ionic 应用！只要开发者可以使用 v5.0 或更高版本的 Ionic 框架，他们就可以使用所有的 Ionic Gestures 功能。

🌐 Ionic Gestures is a utility that allows developers to build custom gestures and interactions for their application in a platform agnostic manner. Developers do not need to be using a particular framework such as React or Angular, nor do they even need to be building an Ionic app! As long as developers have access to v5.0 or greater of Ionic Framework, they will have access to all of Ionic Gestures.

构建复杂手势可能会很耗时。其他提供自定义手势的库往往过于笨重，最终会捕获鼠标或触摸事件而不让其传播。这可能导致其他元素无法滚动或点击。

🌐 Building complex gestures can be time consuming. Other libraries that provide custom gestures are often times too heavy handed and end up capturing mouse or touch events and not letting them propagate. This can result in other elements no longer being scrollable or clickable.

安装​

🌐 Installation

Developers using Ionic Core and JavaScript should install the latest version of @ionic/core.

import { createGesture } from 'https://cdn.jsdelivr.net/npm/@ionic/core@latest/dist/esm/index.mjs';

...

const gesture = createGesture({
  el: elementRef,
  threshold: 15,
  gestureName: 'my-gesture',
  onMove: event => onMoveHandler(event)
});

基本手势​

🌐 Basic Gestures

在此示例中，我们的应用监听 ion-content 元素上的手势。当手势移动开始时，会调用 onStart 函数，并向我们的 ion-card 添加一个类，以添加彩色框阴影。当检测到手势移动时，会调用 onMove 函数，并且我们的应用会在 ion-card 中打印当前手势信息。最后，当手势移动结束时，会调用 onEnd 函数，并从我们的 ion-card 中移除自定义类。

🌐 In this example, our app listens for gestures on the ion-content element. When a gesture movement has started, the onStart function is called and a class is added to our ion-card to add a colored box shadow. When a gesture movement was detected, the onMove function is called and our app prints the current gesture information within the ion-card. Finally, when a gesture movement has ended, the onEnd function is called and the custom class is removed from our ion-card.

双击手势​

🌐 Double Click Gesture

在下面的例子中，我们希望能够检测元素上的双击。通过将我们的 threshold 设置为 0，我们可以确保我们的手势对象能够检测点击。此外，我们定义了一个点击阈值，以便只有快速连续发生的两次点击才算作双击。

🌐 In the example below, we want to be able to detect double clicks on an element. By setting our threshold to 0, we can ensure our gesture object can detect clicks. Additionally, we define a click threshold so that only 2 clicks that occur in quick succession count as a double click.

手势动画​

🌐 Gesture Animations

查看我们关于实现手势动画的指南：使用 Ionic 动画的手势动画

🌐 See our guide on implementing gesture animations: Gesture Animations with Ionic Animations

类型​

🌐 Types

名称值
GestureCallback(detail: GestureDetail) => boolean | void

接口​

🌐 Interfaces

GestureConfig​

| 属性 | 类型 | 默认值 | 描述 |

| --- | --- | --- | --- |

| el | Node | undefined | 用于监听手势的元素。 |

| disableScroll | boolean \| undefined | false | 如果为 true，在手势启用时，el 上的滚动将被禁用。 |

| 方向 | 'x' \| 'y' \| undefined | 'x' | 将手势检测限制在某个轴向的移动。 |

| 手势名称 | string | undefined | 要创建的手势名称。 |

| gesturePriority | number \| undefined | 0 | 优先级更高的手势会覆盖优先级较低的手势。对于确保多个手势不会相互冲突非常有用。 |

| 被动 | boolean \| undefined | true | 如果为真，这将表示该手势永远不会调用 preventDefault()。这可以用来提升滚动性能。更多信息请参见 被动监听器。 |

| maxAngle | number \| undefined | 40 | 检测手势时允许的最大角度。 |

| 阈值 | number \| undefined | 10 | 定义手势开始前指针必须移动的距离。 |

| blurOnStart | boolean \| undefined | undefined | 如果为 true，手势将在触发 onStart 回调之前使任何活动的可选元素（如输入框或文本区域）失焦。 |

| canStart | GestureCallback \| undefined | undefined | 一个回调函数，如果允许手势开始则返回 true。 |

| onWillStart | (detail: GestureDetail) => Promise<void> | undefined | 当手势即将开始时触发的回调。它在 canStart 之后但在 onStart 之前触发。 |

| onStart | GestureCallback \| undefined | undefined | 当手势开始时触发的回调。 |

| onMove | GestureCallback \| undefined | undefined | 当检测到手势移动时触发的回调。 |

| onEnd | GestureCallback \| undefined | undefined | 当手势结束时触发的回调。通常在指针被释放时触发。 |

| notCaptured | GestureCallback \| undefined | undefined | 当手势未被捕获时触发的回调。这通常发生在存在优先级更高的冲突手势时。 |

GestureDetail​

| 属性 | 类型 | 描述 |

| --- | --- | --- |

| 类型 | string | 检测到的手势类型。 |

| startX | number | 手势的起始 x 坐标。 |

| startY | number | 手势的起始 y 坐标。 |

| startTimeStamp | number | 手势开始的时间戳。 |

| currentX | number | 手势的当前 x 坐标。 |

| currentY | number | 手势的当前 y 坐标。 |

| velocityX | number | 手势在 x 轴上的当前移动速度。 |

| velocityY | number | 手势在 y 轴上的当前移动速度。 |

| deltaX | number | 手势从开始以来在 x 轴上移动了多少。 |

| deltaY | number | 手势从开始以来在 y 轴上移动了多少。 |

| 时间戳 | number | 手势的当前时间戳。 |

| 事件 | UIEvent | 浏览器触发的原生事件。更多信息请参见 UIEvent。 |

| 数据 | any \| undefined | 用户指定的任何数据。可以在任意回调中设置和读取。 |

方法​

🌐 Methods

enable(enable: boolean = true) => void​

启用或禁用手势。

🌐 Enable or disable the gesture.

destroy() => void​

销毁手势实例并停止监听目标元素。

🌐 Destroy the gesture instance and stop listening on the target element.

目录