你可以将动态数据添加到IONIC 6 Angular中的Swiper.js如何实现?

huangapple go评论53阅读模式
英文:

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, `&lt;swiper-slide&gt;test&lt;/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(() =&gt; { this.slideVeiculos.slideTo(index, 500); }, 500);

Definitely not the best approach, but til now its been working.

huangapple
  • 本文由 发表于 2023年4月6日 22:12:29
  • 转载请务必保留本文链接:https://go.coder-hub.com/75950525.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定