如何在IONIC 6 Angular上向Swiper.js添加动态数据?

djmepvbi  于 2023-04-18  发布在  Ionic
关注(0)|答案(1)|浏览(128)

我正在开发一个最近迁移的应用程序(IONIC 3到IONIC 6),在更新期间,Ion-Slide组件的弃用消息出现了,所以我们在我们的项目上发布了一个问题,并开始迁移到Swiper.js库。在以前的应用程序版本(IONIC 3)中,我们可以使用angular添加到DOM的动态数据并使用其索引,没有问题:
〈ion-slides spaceBetween="-40”style=“margin-top:0px;”(ionSlideDidChange)=“atualizaVeiculoSelecionado()"〉〈ion-slide *ngFor=“let veiculo of _veiculos”〉....
由于我们更改为IONIC 6,这不再起作用。在向变量_veiculos添加数据后,视图更新,但无法找到新对象的索引,因此在Swiper上调用slideTo,使其数组索引简单地移动到页面创建时的最后一个可用索引,我目前正在尝试理解swiper.js如何使用它的docionic doc工作,但没有成功。
目前在@ionic/angular 6.7.1@angular/core 15.2.5上使用Swiper 9.2.0(捆绑版本遵循IONIC文档)(我们在Swiper安装期间更新了所有软件包,所以我想我们是最新的)
我们尝试更新数组并在Swiper上调用update(),但似乎什么也没做(甚至updateSlides()),因为Swiper。slides仍然保持其原始大小。我们还尝试销毁和重新创建Swiper,但也失败了。
Here's a simulation I've made to describe better
我们真的被困在这种情况下,所以任何帮助将不胜感激

rqmkfv5c

rqmkfv5c1#

您可以使用操作功能。

this.swiper.addSlide(3, `<swiper-slide>test</swiper-slide`);

Here's我测试的几种方法。

相关问题