1

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

这是我的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。

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

任何帮助深表感谢。

4

1 回答 1

4

首先你必须ionSlideWillChange()在离子滑块上监听事件，然后你可以检查幻灯片是否结束。所以在 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';
      }
    });
}
于 2019-04-04T13:24:51.043 回答