在 Ionic4 中无法检查我的滑块是否已到达最后一张幻灯片

Question

我在我的 Ionic 4 应用程序中工作，我已经使用循环添加了滑块，我正在检查滑块是否已经到达最后一个滑块，我已经使用 isEnd() 进行了检查，但是它始终显示为真。

这是我的intro.page.html:

<ion-slides #slides pager="true" parallax="true" spaceBetween="0">
    <ion-slide class="step-one" *ngFor="let item of splashdata">
    </ion-slide>
  </ion-slides>
  <p class="myp2" (click)="next()">{{ NextSlide }}</p>

在这个视图中，我在循环中显示了滑块，我还显示了下一个按钮和完成按钮。如果滑块到达最后一张幻灯片，它将显示完成，否则将显示下一张。

这是我的intro.page.ts:

export class IntroPage implements OnInit {
  @ViewChild('slides') slides: IonSlides;
  NextSlide: any;
  constructor() { }

  ngOnInit() {}

  ionViewWillEnter(){
    let me = this;
    me.slides.isEnd().then((istrue) => {
      console.log(istrue);
      if (istrue) {
        me.NextSlide = 'Finish';
      } else {
        me.NextSlide = 'Next';
      }
    });
  }

  next() {
    this.slides.slideNext();
  }
}

在这个 ts 文件中，我已经使用 isEnd() 进行了检查，但问题是，它始终显示为 true。

我想按幻灯片显示按钮文字，如果滑块将到最后一张幻灯片，按钮文字将更改为完成，否则将显示幻灯片的下一张。

非常感谢任何帮助。

Answer 1

首先你必须在 ionic slider 上监听 ionSlideWillChange() 事件，然后你可以检查 slide 是否结束。所以在 ion-slides 中收听 ionSlideWillChange() 事件，如下所示：

<ion-slides #slides (ionSlideWillChange)="slideChanged()">
    ...
    ...
</ion-slides>

现在，您可以在 slideChanged() 方法中检查幻灯片是否结束，例如：

slideChanged() {
    let me = this;
    me.slides.isEnd().then((istrue) => {
      console.log(istrue);
      if (istrue) {
        me.NextSlide = 'Finish';
      } else {
        me.NextSlide = 'Next';
      }
    });
}

在 Ionic4 中无法检查我的滑块是否已到达最后一张幻灯片

Not able to check whether my slider has come to the last slide or not in Ionic4

ionic-framework

ion-slides

angular

ionic4