Question

使用IONIC 4离子载玻片，我试图使用getActiveIndex（）获取当前单击的silde索引，如下所示，该索引不起作用。

<ion-slides #testSlider (ionSlideTap)="getIndex()">
 <ion-slide>....</ion-slide>
</ion-slides>


@ViewChild('testSlider') slider: ElementRef;  // first way

getIndex() {
     this.slider.nativeElement.getActiveIndex();
}


@ViewChild('testSlider') slider: Slider; //second way

getIndex() {
     this.slider.getActiveIndex();
}

以下另一种方法也不起作用：

<ion-slides #testSlider (ionSlideTap)="getIndex(testSlider)">
 <ion-slide>....</ion-slide>
</ion-slides>


getIndex(testSlider) {
     testSlider.getActiveIndex();
}

有人可以建议我如何获得IONIC 4中的活动索引或当前点击的幻灯片索引吗？

Answer 1

已更新：

我认为我犯了一些错误，这是有效的示例（离子3）。请确保您使用的是$ event。

模板文件：

<ion-slides (ionSlideTap)="getIndex($event)">
 <ion-slide>1</ion-slide>
</ion-slides>

现在在TS文件中：

getIndex(event) {
  console.log(event.clickedIndex);
}

尝试以上方法？

这里正在进行堆叠闪电战：https://stackblitz.com/edit/ionic-ssvout

Answer 2

在模板中

<ion-slides pager="true" (ionSlideDidChange)="slideChanged($event)" #slides>
</ion-slides>

在组件中

import { IonSlides } from '@ionic/angular';

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

slideChanged(e: any) {
    this.slides.getActiveIndex().then((index: number) => {
        console.log(index);
    });
}

Answer 3

我遇到了同样的问题，但是设法解决了以下问题：

export class SomePage implements OnInit {
  ...
  currentIndex:Number = 0;
  ...

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

请注意，尽管它似乎可行，但我怀疑由于Promise内的值已更改，因此，如果最近没有更改，它只会返回正确的值。因此，我打算通过执行等待来对此进行更新。

Answer 4

离子4

*。html

<ion-slides #slides (ionSlideDidChange)="slideChanged(slides)">
  ...
</ion-slides>

*。 ts

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

Answer 5

1）将ID分配给相应的#slides

<div>
   <ion-slides #slide (ionSlideDidChange)="SlideChanges(slide)">

   </ion-slides>
</div>

2）在您的.ts页面/组件中导入IonSlides

从'@ ionic / angular'导入{IonSlides};

3）。使用方法

SlideChanges(slide: IonSlides) {
   slide.getActiveIndex().then((index: number) => {
    this.yourSlideIndex= index;
       alert(this.yourSlideIndex)
   });
 }

Answer 6

根据the documentation，getActiveIndex()返回一个Promise<number>。
因此，使用ionSlideTap：

<ion-slides (ionSlideTap)="onSlideTapped($event)">
    ...
</ion-slides>

我发现了两种解决方法：

如phunder所建议，您可以使用then()来检索其值。我也使用async/await做到了：

async onSlideTapped(event: any) {
    const index: number = await event.target.getActiveIndex();
    console.log(index);
}

或者您可以使用swiper对象：

onSlideTapped(event: any) {
    console.log(event.target.swiper.clickedIndex);
}

因此，您不必监听所有更改或将IonSlides导入组件。

Answer 7

是的，它正在工作......！

// Typescript
import { IonSlides } from '@ionic/angular';
// in Component Class
export class AppComponent implements OnInit {
  @ViewChild('contentSlider') contentSlider: IonSlides;
  constructor(){}
  ngOnInit() {}
  
  do_getActiveSlide(e: any) {
    this.contentSlider.getActiveIndex().then((index: number) => {
      console.log("Current active slide index", index);
    });
  }
}

div {
  width: 100%;
  height: 5em;
  color: gold;
  background-color: #333;
  margin: 1.5em;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
<script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core/dist/ionic/ionic.esm.js"></script>
<script nomodule src="https://cdn.jsdelivr.net/npm/@ionic/core/dist/ionic/ionic.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core/css/ionic.bundle.css"/>

<ion-slides pager="true" (ionSlideDidChange)="do_getActiveSlide($event)" #contentSlider>
  <ion-slide>
    <div>1</div>
  </ion-slide>
  <ion-slide>
    <div>2</div>
  </ion-slide>
  <ion-slide>
    <div>3</div>
  </ion-slide>
</ion-slides>

IONIC 4：getActiveIndex（）在离子幻灯片中不起作用

7 个答案: