ion-slides 方法不适用于 ionic 4

Question

无法使用官方文档中ion-slides提供的方法。在这里检查了其他答案，但似乎都将 ionic 4 与 ionic 3 混淆了，并提供了适用于 ionic 3 的答案。

我想获取幻灯片的活动索引。关于如何实施它的在线文档并不完整。

Answer 1

在 html 中使用幻灯片 ID 和活动幻灯片更改时发出的函数构建滑块。

<ion-slides #slides (ionSlideDidChange)="getIndex()">
  <ion-slide></ion-slide>
</ion-slides>

在 .ts 文件中，您使用 ViewChild 导入滑块 ID 并设置函数以获取活动索引。

import { Component, OnInit, ViewChild } from '@angular/core';
import { Slides } from '@ionic/angular';  

export class Page implements OnInit {

  @ViewChild('slides') slides: Slides;

  constructor() {}

  ngOnInit() {
  }

  async getIndex() {
    console.log(await this.slides.getActiveIndex());
  }

}

Answer 2

我遇到了同样的问题，但我用下面的代码解决了它：

我的.ts文件：

export class RegistroPage implements OnInit {
  @ViewChild('registroWizard') registroWizard: IonSlides;
  slideOpts: any;
  constructor() {
    this.slideOpts = {
      effect: 'fade'
    };
  }

  ngOnInit() {
     this.registroWizard.lockSwipeToNext(true);
  }

}

我的 HTML 文件：

<ion-slides #registroWizard pager="true" [options]="slideOpts">
    <ion-slide>
      <h1>Slide 1</h1>
      <ion-button>Hola</ion-button>
    </ion-slide>
    <ion-slide>
      <h1>Slide 2</h1>
      <ion-button>Hola</ion-button>
    </ion-slide>
    <ion-slide>
      <h1>Slide 3</h1>
      <ion-button>Hola</ion-button>
    </ion-slide>
  </ion-slides>

Answer 3

在 ionic 4 中，getActiveIndex() 方法的 return 类型是 Promise<number>，因此您在 ionic 3 中使用的代码将不再有效。您至少可以将其关闭，例如：

     this.slider.getActiveIndex()
      .then(activeIndex => {
        console.log('active index = ', activeIndex );
        if (activeIndex < this.slides.length) {
          this.selectedSegment = this.slides[activeIndex ].id;
        }
     });

或者你想用它做什么。官方文档实际上非常棒：https://ionicframework.com/docs/api/slides

Answer 4

我是这样解决问题的：

page.ts:

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

...

@ViewChild('slides') slides: IonSlides;


nextSlide() {
    this.slides.slideNext();
}

page.html:

<ion-slides #slides pager="true" [options]="slideOpts">
    <ion-slide>slide 1</ion-slide>
    <ion-slide>slide 2</ion-slide>
</ion-slides>

<ion-button (click)="nextSlide()" class="register-buttons">go next</ion-button>

后退动作完全相同

Answer 5

注意：使用 IonSlides，不要使用 ElementRef 和 nativeElement

只需按照下面的代码，它就可以很好地从 getActiveIndex()

获取活动索引

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

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

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

Answer 6

静态：真

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

Answer 7

你需要声明 class 到 app.module.ts

@NgModule({
  declarations: [MySliderComponent]
})

Answer 8

我使用 IonSlides 作为类型，但它没有帮助。对我来说，上述解决方案不起作用（ionic v6.17.1）。有效的是：

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

swipeRight() {
this.slides.nativeElement.slideNext();

所有方法都是这样工作的。改变 ```{static: true} 没有抛出任何错误如果您 console.log 在将幻灯片声明为 IonSlides 类型后，它会显示 ElementRef 类型

ion-slides 方法不适用于 ionic 4

ion-slides methods not working in ionic 4

ionic4