ionic-team / ionic-team/ionic-framework

feat: expose direction property on gesture event

Abierto
#21,430 9 comentarios 0 reacciones 0 asignados Ver en GitHub
package: core type: feature request
Lenguaje dominante
TypeScript
Estrellas
52.7k
Forks
13.3k
Merge medio
1 d 15 h
PR fusionados (30 d)
51

Descripción

# Feature Request
Hi! I have a specific use case where I have an instagram stories-esque image carousel in my app. I am using Ionic Gestures to listen for pan events when swiping to the next image. The issue I have is that I am unable to disable a swipe gesture in a specific direction on the x axis.

For example, when the user opens their stories, they should not be able to swipe backwards because they are watching their first story. I figured I could use the `canStart` event for this. However, the `GestureDetail`'s `deltaX` value is 0 since it is triggered right at the beginning of the gesture event (e.g. no delta has been registered).

I was wondering if we could have some sort of API that would allow us to prevent gestures in a negative of positive direction on an axis? Or is there a better way to do what I'm explaining?

![Swipe Gesture](https://media.giphy.com/media/d7CPFPW6bNC7AG9ASn/giphy.gif)

Notice the black screen when I try to swipe back? I am at index 0 and should not be allowed to swipe back like that.

For example here's my React Gesture:

```
const swipeGesture = createGesture({
el: cubeRef.current!,
gestureName: 'swipe-gesture',
direction: 'x',
gesturePriority: 50,
onMove: (ev) => onMove(ev),
onEnd: (ev) => onEnd(ev)
});
swipeGesture.enable(true);
```

I use `react-spring` for my transition animations:

```
const onMove = (ev: GestureDetail) => {

const currentRotate = index * 90 * -1;
const convert = linearConversion([0, width], [currentRotate, currentRotate + 90]);
let v = convert(ev.deltaX);

// prevent current drag event from transitioning more than 90 degrees
if (v > currentRotate + 90) {
v = currentRotate + 90;
} else if (v < currentRotate - 90) {
v = currentRotate - 90;
}

// this is where the transition animation occurs, I am setting my css `translateY` to the value of `rotateY` defined here
set({
rotateY: v,
immediate: true,
});
};
```

In my code I can check to see if the user is at `index === 0`, if so, I would like to prevent pan gestures that result in a positive `deltaX` event.

**Describe Preferred Solution**

A very rough idea is to have an API like:

`axis: 'positive' | 'negative' | 'both'`

If it was possible to use `canStart` for this, I would do something like:

```
const canStart = (ev: GestureDetail) => {
// if we are on the first item and the user tries to swipe backwards
if (index === 0 && ev.deltaX > 0) {
return false
}
// else allow start
return true;
}
```

**Describe Alternatives**

I've tried to `swipeGesture.enable(false)` within my `onMove()` method with hopes that an `onEnd()` event would be called, so that I could re-enable the gesture once they let go but that doesn't work either.

Any thoughts on this would be super helpful, thank you!

**Ionic version:**

[x] **5.1.0**

Guía de contribución

Abrir la guía de contribución

Evaluación

Este issue todavía no se ha evaluado.

Recibe los nuevos issues en tu correo

Un resumen breve de issues de GitHub para principiantes.