显示幻灯片Ionic的索引号

Question

我正在开发一个应用程序，我已经创建了一些幻灯片，但是我需要显示幻灯片的索引号而不是页面。

我想做这样的事情：

Answer 1

您可以编写如下内容：

HTML：

<ion-slides pager="true" paginationType="fraction">

尝试一下

Answer 2

有一种方法可以执行此操作，但您需要将幻灯片保存在数组中。您还需要在类中显示一个属性，以显示当前页面。

在您的页面.ts文件中：

export class YourPage {
  // the current page number
  public page: number = 0;
  // your slides
  public mySlides = [...your slides...];

  // when the slides changes this method is triggered, needs to be +1 since the index starts at 0
  slideChanged = ev => this.page = ev.realIndex + 1;
}

然后是您的页面html文件

<ion-slides pager="false" (ionSlideDidChange)="slideChanged($event)">
  <ion-slide *ngFor="let slide of mySlides ">
    <!-- your slides code -->
  </ion-slide>
</ion-slides>
<p text-center>{{page}} of {{mySlides.length}}</p>

希望这会有所帮助。

Answer 3

ionViewWillEnter(){
    this.ionSlides.length().then(number => {
        console.log(number);
       this.allNumber = number;
    });
}

sliderDoChange() {
    this.ionSlides.getActiveIndex().then(index => {
       this.currentNumber = index;
    });
}