Ionic 2 – how to prevent page changes on ion-slides by swipe gesture?

0

Issue

I saw the solution in many different sources for this, including Stack Overflow. This is working for me partially: I can’t swipe to the left or right to switch the pages. That’s fine ! But if the user click a button , keep the button pressed and swipe, this will cause pagination. (I just testing using Android)

The solution according with many sources is that one:

<ion-slides [options]="{onlyExternal: false}">
</ion-slides>

Let me illustrate this with screenshots…

enter image description here

If I swipe here, nothing will happen

Now, if I hold and swipe the red button, this will cause pagination.

enter image description here

Solution

The way i do this is:

On my .ts file of the page i have a slide i do this

import { Component, ViewChild } from '@angular/core';
import { Slides } from 'ionic-angular';

@Component({
  selector: 'page',
  templateUrl: 'page.html'
})
export class Page{
  @ViewChild(Slides) slides: Slides;

  contructor() {
    this.slides.lockSwipes(true);
  }

  nextSlide(){
    this.slides.lockSwipes(false);
    this.slides.slideNext();
    this.slides.lockSwipes(true);
  }
}

And in your HTML you call the function on a button

<button ion-button block (tap)="nextSlide()">NEXT</button>

So when the page is beeing constructed i lock the swipe, and when someone click next/back i unlock the swipe, go to next slide and lock it back.

Hope it helps

Answered By – Gabriel Barreto

This Answer collected from stackoverflow, is licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0

Leave A Reply

Your email address will not be published.

This website uses cookies to improve your experience. We'll assume you're ok with this, but you can opt-out if you wish. Accept Read More