Estoy creando una aplicación con tabs. En tab2.page.html tengo 2 , os dejo código para comprender mejor:
<ion-slides class="slidesTab2" #slidesTab2 pager="false">
<ion-slide>
---- código ----
</ion-slide>
<ion-slide>
---- código ----
</ion-slide>
</ion-slides>
--- código ---
<ion-col>
<ion-button shape="round" size="small" fill="outline" color="tertiary (click)="goToNext()">
Next
</ion-button>
</ion-col>
<ion-button shape="round" size="small" fill="outline" color="tertiary (click)="goToPrev()">
Prev
</ion-button>
</ion-col>
y su correspondiente clase tab2.page.ts:
@ViewChild('slidesTab2', { static: true }) slidesTab2: IonSlides;
--- código ---
goToNext() {
this.slidesTab2.lockSwipes( false );
this.slidesTab2.slideNext();
this.slidesTab2.lockSwipes( true );
}
goToPrev() {
this.slidesTab2.lockSwipes( false );
this.slidesTab2.slidePrev();
this.slidesTab2.lockSwipes( true );
}
En tab3.page.html tengo otros 2 , os dejo código para comprender mejor:
<ion-slides class="slidesTab3" #slidesTab3 pager="false">
<ion-slide>
---- código ----
</ion-slide>
<ion-slide>
---- código ----
</ion-slide>
</ion-slides>
--- código ---
<ion-col>
<ion-button shape="round" size="small" fill="outline" color="tertiary (click)="goToNext()">
Next
</ion-button>
</ion-col>
<ion-button shape="round" size="small" fill="outline" color="tertiary (click)="goToPrev()">
Prev
</ion-button>
</ion-col>
y su correspondiente clase tab3.page.ts:
@ViewChild('slidesTab3', { static: true }) slidesTab3: IonSlides;
--- código ---
goToNext() {
this.slidesTab3.lockSwipes( false );
this.slidesTab3.slideNext();
this.slidesTab3.lockSwipes( true );
}
goToPrev() {
this.slidesTab3.lockSwipes( false );
this.slidesTab3.slidePrev();
this.slidesTab3.lockSwipes( true );
}
El problema que solo funciona el primer slides que abro. Es decir, abro la aplicación, abro el tab2 y funciona perfectamente el slides. Y si seguidamente abro tab3, el slides declarado en esta clase no funciona. He probado a imprimir en cada función el index activo con slide.getActiveIndex();, pero el slides que abro en segundo lugar, el que no funciona, imprime empty. ¿Cómo puedo solucionarlo para que funcionen 2 slides? Gracias.
UPDATE:
También he probado con modificar la forma de cambiar de slide:
goToNext() {
this.slidesTab2.lockSwipes( false );
this.slidesTab2.slideTo(1);
this.slidesTab2.lockSwipes( true );
}
goToPrev() {
this.slidesTab2.lockSwipes( false );
this.slidesTab2.slideTo(0);
this.slidesTab2.lockSwipes( true );
}
UPDATE:
También he podido observar que después de unos minutos sin utilizar los slides, dejan de funcionar. He añadido console.log('Entra') y lo ejecuta, pero parece no ejecutar los métodos del slide (slideTo, SlidePrev, SlideNext).