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

Question

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

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

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

我认为 Ionic 方面存在问题，因为如果我在最后一张幻灯片上，getActiveIndex 也会不正确(尽管它返回最后一张幻灯片索引)

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

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 中 ionic 载玻片 active 指数的问题。