英文:
How can i add dynamic data to Swiper.js on IONIC 6 Angular?
问题
I'm working on a recently migrated app (IONIC 3 to IONIC 6) and during the updates, the deprecated message for the Ion-Slide component showed up, so we launched an issue on our project and started the migration to the Swiper.js lib. On the previous app version (IONIC 3) we could work with dynamic data added to the DOM using angular and use its index without problems:
> <ion-slides spaceBetween="-40" style="margin-top: 0px;" (ionSlideDidChange)="atualizaVeiculoSelecionado()">
<ion-slide *ngFor="let veiculo of _veiculos">....
Since we changed to IONIC 6 this doesn't work anymore. After adding data to our variable _veiculos
the view updates but the index can't be found for the new object, so calling slideTo
on Swiper makes its array index simply move to the last index available when the page was created, ignoring the new element. I'm currently trying to understand how the swiper.js works using its doc and the ionic doc but without success.
Currently using Swiper 9.2.0
(Bundle version following the IONIC doc) on @ionic/angular 6.7.1
and @angular/core 15.2.5
(We updated all our packages during Swiper installation so I guess we're up to date)
We tried updating the array and calling update()
on the Swiper but it also seems to do nothing (Even updateSlides()
) since Swiper.slides still keep their original size. We also tried destroying and re-creating Swiper but also failed.
Here's a simulation I've made to describe better
We are really stuck in this situation so any help would be appreciated
英文:
I'm working on a recently migrated app (IONIC 3 to IONIC 6) and during the updates, the deprecated message for the Ion-Slide component showed up, so we launched an issue on our project and started the migration to the Swiper.js lib. On the previous app version (IONIC 3) we could work with dynamic data added to the DOM using angular and use its index without problems:
> <ion-slides spaceBetween="-40" style="margin-top: 0px;" (ionSlideDidChange)="atualizaVeiculoSelecionado()">
<ion-slide *ngFor="let veiculo of _veiculos">....
Since we changed to IONIC 6 this doesn't work anymore. After adding data to our variable _veiculos
the view updates but the index can't be found for the new object, so calling slideTo
on Swiper make its array index simply moves to the last index available when the page was created, ignoring the new element. I'm currently trying to understand how the swiper.js works using its doc and the ionic doc but without success.
Currently using Swiper 9.2.0
(Bundle version following the IONIC doc) on @ionic/angular 6.7.1
and @angular/core 15.2.5
(We updated all our packages during Swiper installation so i guess we're up to date)
We tried updating the array and calling update()
on the Swiper but also seems to do nothing (Even updateSlides()
) since Swiper.slides still keep its original size. We also tried destroying and re-creating Swiper but also failed.
Here's a simulation I've made to describe better
We are really stuck on this situation so any help would be appreciated
答案1
得分: 0
你可以使用操纵函数。
this.swiper.addSlide(3, <swiper-slide>test</swiper-slide>
);
这里是我测试过的一些方法。
英文:
You can use the manipulation functions.
this.swiper.addSlide(3, `<swiper-slide>test</swiper-slide`);
Here's a few methods I tested.
答案2
得分: 0
没有找到解决这个问题的方法,但我们成功地通过在检查 Swiper 之前使用 500 毫秒的超时来绕过它。
setTimeout(() => { this.slideVeiculos.slideTo(index, 500); }, 500);
绝对不是最佳方法,但到目前为止它一直在工作。
英文:
Didn't find a way to solve this issue, but we manage to bypass it using a 500ms timeout before checking the Swiper.
setTimeout(() => { this.slideVeiculos.slideTo(index, 500); }, 500);
Definitely not the best approach, but til now its been working.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库,让每个人都能够通过互相帮助和分享经验来进步。
评论