Gestos

Desde la entrada de los dispositivos móviles se han incoporado una serie de gestos que hasta ahora, con el puntero del ratón, no eran intuitivos o cómodos. En cambio, con estos nuevos dispositivos, son de lo más utilizados sobre todo en las apps para móviles.

En ionic, existe un servicio llamado $ionicGesture, que nos sirve para detectar los diferentes gestos. Vamos a ver los más utilizados:

onHold : cuando el dedo está más de 500ms sobre el elemento, que en este caso es un botón. Es lo que vulgarmente se conoce como mantener pulsado.

<button on-hold="onHold()" class="button">Test</button>

onTap: detecta toques rápidos. menos de 250ms.

<button on-tap="onTap()" class="button">Test</button>

onDoubleTap: doble toque con el dedo sobre el elemento

<button on-double-tap="onDoubleTap()" class="button">Test</button>

onTouch: se llama inmediatamente sin esperar al evento touchend.

<button on-touch="onTouch()" class="button">Test</button>

onRelease: se llama cuando el usuario levanta el dedo del elemento.

<button on-release="onRelease()" class="button">Test</button>

onSwipeRight: se llama cuando el usuario arrastra el dedo hacia la derecha a alta velocidad sobre el elemento.

<button on-swipe-right="onSwipeRight()" class="button">Test</button>

Ver más gestos de ionic

Hasta ahora hemos definido en el HTML que cuando ocurra un gesto llame a un metodo del controlador. Pero esto también puede realizarse desde el controlador como vemos a continuación.

Lo primero, debemos inyectar en nuestro controlador el servicio $ionicGesture.

Para asignar a un elemento un evento, es tan sencillo como utilizar el método on.

$ionicGesture.on(eventType, callback, $element, options)