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

【问题标题】：Ionic 5 Slides ionSlideDidChange not called for last slide最后一张幻灯片未调用 Ionic 5 Slides ionSlideDidChange
【发布时间】：2020-09-14 20:29:59
【问题描述】：

我目前正在使用离子幻灯片（在 Ionic 5 中）并且在获取最后一张幻灯片的选定幻灯片索引时遇到问题。在我将slidesPerView 设置为 1.3 后会出现此问题。

当我尝试滑到最后一张幻灯片时，即使ionSlideDidChange 事件也不会被触发（当我滑到其他幻灯片时，事件被触发了。）

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

我认为 Ionic 方面存在问题，因为如果我在最后一张幻灯片上，getActiveIndex 也无法正常工作（虽然它返回最后一张幻灯片索引）

以前有人遇到过这个问题吗？

【问题讨论】：

你能创建 stackblitz 来重现这个问题吗？
我遇到了同样的错误，还没有找到解决办法

标签： typescript ionic-framework ionic4 ion-slides

【解决方案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 团队？
@RubenMiquelino 没有

【解决方案2】：

我用另一种方式解决了这个问题。只有当我在 scss 文件上设置了特定宽度时才会出现这个问题，这样我就可以在一页中显示多张幻灯片。

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

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

};

【讨论】：