How to swipe between pages in Ionic?

Ionic Framework ionic-v3
1

I have a list of 15 things in my app.
I can click on each and a DetailPage opens with the data of the clicked item.

Now I want to be able to swipe between these DetailPages - so that when I am on item 7 swiping left will show me item 8, and swiping right will show me item 6. How do I do that?

In the best case this swiping should seemlessly show the next page while swiping already, like if it was a “carousel” or “ribbon” of pages.

2

Anything wrong with slides? Seems the most ideal for this, no? :slight_smile:

3

So I would have a page with slides for all my list items and then “preselect” the one for the item clicked in the list? Or how would that work?

4

Yup, you can do

<ion-slide [initialSlide]="initialIndex"></ion-slide>
5

Ok, so instead of navigating to DetailPage with a parameter of item (which contains the one clicked item) I would navigate to SliderPage with a parameter of items (which contains all the items in the list) and selected (which is used to go to the correct start slide).

Doesn’t sound too bad! Thanks.

Any pitfalls I should look out for?

6

Haven’t used this before, so I don’t know to be honest! But I’m sure if you run into anything, someone knows a solution :wink:

7

I have to try then.

Am a bit scared, because all I read about Slides here is how it doesn’t work for this or that :stuck_out_tongue:

8

You can just swipe between pages without making any major changes to your core structure.

HTML:

<ion-content (swipe)="swipeEvent($event)" padding>

Typescript:

swipeEvent(e) {
    if (e.direction == 2) {
      this.navCtrl.push('Item2');
    }
}

Swipe right to pop() is the default behavior but you can just set a second swipe event to push or setroot to a previous page if depending on how you want the nav-stack to look.

1 Like
9

Typically I would only pass the selected property via NavParams. The actual list of items is probably better off just sitting in a service provider.

10

Thanks, good point. But this will probably not be “animated” or dynamic as in a slider? Will be more like clicking a button to navigate to the other page after swiping finished, right?

11

Yeah the push() event will act similar to a button, the swipe is performed and only at the end does the next page slide in via animation. The pop() event actually dynamically slides over the current top of the nav-stack though since that’s a native feature included in the framework.

12

Maybe you could specify another or a custom animation to the navCtrl.push and therefore simulate a slider effect while switching pages? In NavOption there is a parameter animation if I reckon correctly

Otherwise yes, you could refactor your code and use a slider. To do so, maybe the most straight forward way is to change your pages to components and use then them inside the slider (pay attention to the memory on older devices if you’ve got multiple complex pages…)

<ion-slides>
  <ion-slide>
     <page1 [param]="something" (output)="somethingElse($event)"></page1>
  </ion-slide>
  <ion-slide>
     <page2 [param]="something" (output)="somethingElse($event)"></page2>
  </ion-slide>
</ion-slides>
14

How would one go about optimizing memory usage here? Using ngIf to only render the component for the active slide seems like one way.

15

you mean while using a slider? yes if many slides only render 2 or 3 slides at a time if you’ve got many components and fear memory problems