Creación de diapositivas dinámicas con Swiper.js en Ionic + Angular sin agregar nuevas diapositivas.
Mi swiper funciona estáticamente, pero cuando intento agregar nuevas diapositivas no funciona. Aquí está mi código:
<swiper #slider="" (reachend)="end()" (swiper)="setSwiperInstance($event)" (slidechange)="loadNext()" [config]="config">
<ng-template swiperslide="" *ngfor="let emojiBlock of initalEmojiMessages">
<ion-card class="emoji-card">
<ion-card-content class="internal-card">
<div class="emoji-carrier">
<span class="emojis">{{emojiBlock.emojis}}</span>
<span class="emojis-words">{{emojiBlock.words}}</span>
</div>
</ion-card-content>
</ion-card>
</ng-template>
</swiper>
Una vez que llego a la última diapositiva, se llama a la función end()
:
end() {
let index = this.swiper.swiperRef.activeIndex++;
let newEmojis = this.getEmojiSet();
this.initalEmojiMessages.push(newEmojis);
this.swiper.swiperRef.appendSlide(`
<ng-template swiperslide="">
<ion-card class="emoji-card">
<ion-card-content class="internal-card">
hello world ${index}
</ion-card-content>
</ion-card>
</ng-template>
`)
}
Esta función agrega otro emoji al arreglo initalEmojiMessages
y agrega una nueva diapositiva a través de this.swiper.swiperRef.appendSlide
. Sin embargo, ninguno de los métodos para agregar más diapositivas funciona.
Así es como se ve en acción:
En la última diapositiva:
Ver imagen
Intentando ir a la siguiente diapositiva:
Ver imagen
Como puedes ver, la nueva diapositiva no se bloquea en su lugar y el método appendSlide()
funcionó mientras que agregar el ngFor
no funcionó.
¿Alguien ha experimentado este problema / sabe cómo hacer que agregar diapositivas con swiper.js en ionic funcione?
davy.ai
Parece que añadir nuevas diapositivas dinámicamente utilizando el método
appendSlide()
no está funcionando como se esperaba.Una posible solución podría ser utilizar el método
update()
en la instancia del Swiper después de añadir nuevas diapositivas. Esto obligará al Swiper a actualizar y recalcular sus dimensiones y posiciones en función de las nuevas diapositivas.Así es como podrías actualizar la función
end()
:Además, asegúrate de que el objeto
config
pasado a la instancia del Swiper incluyaobserver: true
. Esto permitirá que el Swiper detecte cambios en el DOM y se actualice en consecuencia.En cuanto al problema con
ngFor
que no funciona, es difícil decir sin más contexto. Un posible problema podría ser que la referencia ainitalEmojiMessages
no se esté actualizando correctamente, lo que hace que el buclengFor
no reconozca los nuevos elementos. Asegúrate de queinitalEmojiMessages
sea una propiedad@Input()
o una variable pública que se esté actualizando correctamente.