3

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

ionSlideDidChange当我尝试滑到最后一张幻灯片时，甚至事件都不会被触发（当我滑到其他幻灯片时，事件触发得很好。）

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

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

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

4

2 回答 2

3

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 中遇到离子幻灯片的活性索引问题。

于 2020-05-27T23:42:10.593 回答
0

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

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

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

};

于 2020-10-28T17:49:34.167 回答