ionic-team / ionic-team/ionic-framework

feat: expose direction property on gesture event

Đang mở
#21,430 9 bình luận 0 reaction 0 người được giao Xem trên GitHub
package: core type: feature request
Ngôn ngữ chính
TypeScript
Star
52.7k
Fork
13.3k
Merge trung bình
1 ngày 15 giờ
Pull request đã merge (30 ngày)
51

Mô tả

# 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**

Hướng dẫn đóng góp

Mở hướng dẫn đóng góp

Đánh giá

Issue này chưa được đánh giá.

Nhận issue mới trong hộp thư của bạn

Bản tóm tắt ngắn những issue GitHub phù hợp với người mới.