最后一张幻灯片未调用 Ionic 5 Slides ionSlideDidChange

Question

我目前正在使用 ion-slides（在 Ionic 5 中）并且在获取最后一张幻灯片的选定幻灯片索引时遇到问题。这个问题发生在我设置 slidesPerView 到 1.3.

之后

当我试图滑到最后一张幻灯片时，即使 ionSlideDidChange 事件也没有被触发（当我滑到其他幻灯片时事件被正常触发。）

<ion-slides #subscriptionSlider [options]="slideOpts" pager="true" (ionSlideDidChange)="ionSlideDidChange()">

我认为 Ionic 端有问题，因为如果我在最后一张幻灯片上，getActiveIndex 也会不正确（它 returns 最后一张幻灯片索引）

有没有人遇到过这个问题？

Answer 1

使用 ionSlideTouchEnd 事件解决了问题

这是代码

<ion-slides #subscriptionSlider [options]="slideOpts" pager="true" (ionSlideTouchEnd)="ionSlideTouchEnd($event)">
...
</ion-slides>

// And then in ts file
ionSlideTouchEnd(event) {
    this.subscriptionSlider.getActiveIndex().then(index => {
      let realIndex = index;
      if (event.target.swiper.isEnd) {  // Added this code because getActiveIndex returns wrong index for last slide
        realIndex = this.subscriptions.length - 1;
      }
      // You can now use real index 
    });
  }

希望这能帮助其他人遇到 Ionic 5 中离子载玻片活性指数的问题。

Answer 2

我用另一种方式解决了这个问题。当我在 scss 文件上设置了特定的宽度以便我可以在一页中显示多张幻灯片时，这个问题只会发生在我身上。

我所做的是设置要显示的幻灯片的十进制值。但是当然，如果您需要固定宽度，它仍然无法正常工作。我提出了一个关于离子 github 的问题，该问题正在分类中。

slideOpts = {
initialSlide: 0,
speed: 400,
spaceBetween: 20,
slidesPerView: 1.5,
centeredSlides: true,
centeredSlidesBounds: true,
slidesOffsetBefore: 30,
slidesOffsetAfter: 30

};

最后一张幻灯片未调用 Ionic 5 Slides ionSlideDidChange

Ionic 5 Slides ionSlideDidChange not called for last slide

typescript

ionic-framework

ionic4

ion-slides