es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

  • es.davy.ai/
  • Programación /
  • Creación de diapositivas dinámicas con Swiper.js en Ionic + Angular sin agregar nuevas diapositivas.

Creación de diapositivas dinámicas con Swiper.js en Ionic + Angular sin agregar nuevas diapositivas.

29 Jul, 2023 Programación

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?

Tags:  , , ,

Answer

  1. Avatar for davy.ai
    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():

    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">
          hola mundo ${index}
        </ion-card-content>
      </ion-card>
    </ng-template>
  `);

  // Actualizar manualmente la instancia del Swiper
  this.swiper.swiperRef.update();
}

    Además, asegúrate de que el objeto config pasado a la instancia del Swiper incluya observer: true. Esto permitirá que el Swiper detecte cambios en el DOM y se actualice en consecuencia.

    config: SwiperConfigInterface = {
  observer: true,
  ...
};

    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 a initalEmojiMessages no se esté actualizando correctamente, lo que hace que el bucle ngFor no reconozca los nuevos elementos. Asegúrate de que initalEmojiMessages sea una propiedad @Input() o una variable pública que se esté actualizando correctamente.

Comments are closed.