ionic-framework - 在离子滑块中获取 getActiveIndex 错误

Question

我只有 5 张图片及以下配置

 slideOpts = {
    slidesPerView: 4.25,
    centeredSlides: true,
    initialSlide: 2,
    speed: 400,
    centeredSlidesBounds: true,
    spaceBetween: 0,
    loop: true
  };

现在当我滑动选择幻灯片值时

 getSlideIndex(){
   this.slides.getActiveIndex().then(
     (index)=>{
       this.currentIndex = index;
    });
  }

HTML

 <ion-slides [options]="slideOpts" (ionSlideDidChange)="getSlideIndex()"
                  [ngClass]="{'cs-slider-loaded': slidesEnabled}">
                  <ion-slide *ngFor="let s of slidesItems">
                    <div class="main-wrap">
                      <div class="loading-image">
                        <div class="img-shadow"></div>
                        <div class="game-react" *ngIf="s.sideImg">
                          <img src="{{s.sideImg}}" />
                        </div>
                        <img src="{{s.image}}" class="slidemain_img" alt="" />
                      </div>
                    </div>
                  </ion-slide>
                </ion-slides>

这this.currentIndex是错误的，我有时会得到 12、11、9、7，而循环中只有 5 张图像

Answer 1

Ionic 事件的错误实现，需要使用事件对象。

getSlideIndex(event) {
  event.target.getActiveIndex().then(
    (index)=>{
      this.currentIndex = index;
    });
}

HTML

<ion-slides [options]="slideOpts" (ionSlideDidChange)="getSlideIndex($event)"
...