跳到主要内容
版本：v6

手势

概述​

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

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

安装​

使用 Ionic Core 和 JavaScript 的开发者应安装最新版本的 @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: ev => onMoveHandler(ev)
});

基本手势​

用法​

let p = document.querySelector('p');
const gesture = createGesture({
  el: document.querySelector('.rectangle'),
  onMove: (detail) => { onMove(detail); }
})

gesture.enable();

const onMove = (detail) => {
  const type = detail.type;
  const currentX = detail.currentX;
  const deltaX = detail.deltaX;
  const velocityX = detail.velocityX;

  p.innerHTML = `
    <div>Type: ${type}</div>
    <div>Current X: ${currentX}</div>
    <div>Delta X: ${deltaX}</div>
    <div>Velocity X: ${velocityX}</div>
  `
}

在此示例中，我们的应用监听 .rectangle 元素上的手势。当检测到手势移动时，会调用 onMove 函数，我们的应用记录当前的手势信息。

双击手势​

用法​

const backgrounds = ['rgba(0, 0, 255, 0.5)', 'rgba(0, 255, 0.5)', 'rgba(255, 0, 0, 0.5)', 'rgba(255, 255, 0, 0.5)', 'rgba(255, 0, 255, 0.5)', 'rgba(0, 255, 255, 0.5)'];
const DOUBLE_CLICK_THRESHOLD = 500;
const rectangle = document.querySelector('.rectangle');
const gesture = createGesture({
  el: rectangle,
  threshold: 0,
  onStart: () => { onStart(); }
});

gesture.enable();

let lastOnStart = 0;
let currentColor = 'rgba(0, 0, 255, 0.5)';

const onStart = () => {
  const now = Date.now();

  if (Math.abs(now - lastOnStart) <= DOUBLE_CLICK_THRESHOLD) {
    rectangle.style.setProperty('background', getRandomBackground());
    lastOnStart = 0;
  } else {
    lastOnStart = now;
  }
}

const getRandomBackground = () => {
  const options = backgrounds.filter(bg => bg !== currentColor);
  currentColor = options[Math.floor(Math.random() * options.length)];

  return currentColor;
}

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

手势动画​

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

类型​

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

接口​

GestureConfig​

属性类型默认值描述
elNodeundefined要监听手势的元素。
disableScrollboolean | undefinedfalse如果为 true，在手势启用时，el 上的滚动将被禁用。
direction'x' | 'y' | undefined'x'将手势检测限制在沿某个轴的运动。
gestureNamestringundefined要创建的手势名称。
gesturePrioritynumber | undefined0优先级较高的手势将覆盖优先级较低的手势。有助于确保多个手势不会相互冲突。
passiveboolean | undefinedtrue如果为 true，表示手势永远不会调用 preventDefault()。可用于提高滚动性能。参见被动监听器了解更多信息。
maxAnglenumber | undefined40检测手势时允许的最大角度。
thresholdnumber | undefined10定义指针在开始手势前必须移动多少。
blurOnStartboolean | undefinedundefined如果为 true，手势将在触发 onStart 回调之前模糊任何活动可选元素，如 input 或 textarea。
canStartGestureCallback | undefinedundefined如果允许手势开始，则返回 true 的回调。
onWillStart(detail: GestureDetail) => Promise<void>undefined在手势即将开始时触发的回调。在 canStart 之后、onStart 之前触发。
onStartGestureCallback | undefinedundefined在手势开始时触发的回调。
onMoveGestureCallback | undefinedundefined在检测到手势移动时触发的回调。
onEndGestureCallback | undefinedundefined在手势结束时触发的回调。这通常在指针被释放时发生。
notCapturedGestureCallback | undefinedundefined在手势未被捕获时触发的回调。这通常发生在有更高优先级的冲突手势时。

GestureDetail​

属性类型描述
typestring检测到的手势类型。
startXnumber手势开始的 x 坐标。
startYnumber手势开始的 y 坐标。
startTimeStampnumber手势开始时的时间戳。
currentXnumber手势当前的 x 坐标。
currentYnumber手势当前的 y 坐标。
velocityXnumber手势当前在 x 轴上的移动速度。
velocityYnumber手势当前在 y 轴上的移动速度。
deltaXnumber手势从开始以来在 x 轴上移动的距离。
deltaYnumber手势从开始以来在 y 轴上移动的距离。
timeStampnumber手势的当前时间戳。
eventUIEvent浏览器分发的原生事件。更多信息参见 UIEvent。
dataany | undefined用户指定的任何数据。可以在任何回调中设置和读取。

方法​

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

启用或禁用该手势。

destroy() => void​

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

目录

编辑此页