4

I have an Ionic page on which I'd like to be redirected to a custom page when swiping left. Just redirecting me back isn't good enough, since I can have that page open from a deep link, meaning I have no back on my window's history.

I saw that there's a gesture API, but it's a bit too much for such a common cause. Also, I saw that on previous versions there where swipe left/right events, but no reference for it on Ionic 4/5.

Doesn't Ionic 5 has an on-swipe-left event?

Adam Genshaft
  • 756
  • 10
  • 22
  • 2
    Yes,but you need to add hammerjs to initiate it, you said that there will be no previos page to go back, in ion-back-button add attribute defaultHref="page you need to navigate to if deep linking was active" – Mostafa Harb Apr 12 '20 at 07:32

2 Answers2

3

Another solution, if you didn't want to add a hammerjs dependency and just use Ionic would be to use the official ion-slides component to manage your pages as slides.

I've implemented this on a couple of apps and it works really well.

In your example, you would want to setup an <ion-slides> container and then your 'pages' would exist inside as <ion-slide> components.

You can then easily tap into the (ionSlideDidChange) event as follows:

  <ion-slides
    *ngIf="!isLoading && pages"
    [options]="slideOptions"
    (ionSlideDidChange)="onSlideChange()"
    class="em-height-full"
    #pages
  >

Then in your .js or .ts file just create a method like:

async onSlideChange() {
    this.pageIndex = await this.slides.getActiveIndex();
  }

Then you could track the page with pageIndex. So in your case, you'd open the page from the deepLink (maybe have it route to 'page 2') and then when you swipe left on the slide component you could go to page 1.

zanuka
  • 86
  • 4
2

You are looking for this: https://ionicframework.com/docs/utilities/gestures

Adding HammerJS is not a great idea since you might encounter buggy scenarios.

Javier Aviles
  • 7,952
  • 2
  • 22
  • 28