显示幻灯片的索引号 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;
    });
}