Saltar al contenido

Ionic 2: ¿cómo evitar cambios de página en diapositivas de iones mediante un gesto de deslizamiento?

Solución:

La forma en que hago esto es:

En mi archivo .ts de la página tengo una diapositiva, hago esto

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);
  }
}

Y en tu HTML llamas a la función en un botón

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

Entonces, cuando se está construyendo la página, bloqueo el deslizamiento, y cuando alguien hace clic en siguiente / atrás, desbloqueo el deslizamiento, voy a la siguiente diapositiva y lo bloqueo de nuevo.

Espero eso ayude

Dado que externalOnly ya no funciona en Ionic 4, miré la documentación de la API de Swiper y vi que había cambiado a allowTouchMove ahora.

Entonces: <ion-slides [options]="{allowTouchMove:false}"

¡Haz clic para puntuar esta entrada!
(Votos: 0 Promedio: 0)



Utiliza Nuestro Buscador

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *