时间戳

首页 > 解决方案 > 如何在点击时获得离子滑动指数？

angular - 如何在点击时获得离子滑动指数？

问题描述

我想在点击时获得幻灯片索引，我有离子幻灯片，它的选项是每页 2.5 幻灯片。当我尝试获取活动索引时，它变为零（0）。

这是我的代码

@ViewChild(IonSlides, { static: false }) slides: IonSlides;
slideOpts = {
  slidesPerView: 2.5,
  zoom: false,
  slideShadows: true
};

getIndex() {
    this.slides.getActiveIndex().then((index) => {
      this.currentIndex = index;
      console.log(this.currentIndex);
    })
}

这是我的 HTML

<ion-slides [options]="slideOpts" #slides>
  <ion-slide *ngFor="let item of items">
    <p>{{item.name}}</p>
  </ion-slide>
</ion-slides>

标签： angularionic-framework

解决方案

我试过这个，它为我记录幻灯片索引。

在 HTML 中

<ion-slides pager="true" #mySlider (ionSlidesDidLoad)="slidesDidLoad(mySlider)"
    (ionSlideTransitionEnd)="slideChanged(mySlider)">
<ion-slide (click)="getSlideIndex()"> ... </ion-slide>
</ion-slides>

在你的 ts 文件上

@ViewChild('mySlider', { static: true }) slider: IonSlides;

slidesDidLoad(slides: IonSlides) {
    slides.startAutoplay();
    slides.getActiveIndex().then(index => {
      console.log(index);
    });
  }

  slideChanged(slides: IonSlides) {
    slides.startAutoplay();
    slides.getActiveIndex().then(index => {
      console.log(index);
    });
  }

getSlideIndex(){ //updated
this.slider.getActiveIndex().then(index => {
      console.log(index);
    });
}

尝试一下。

推荐阅读