Question

无法使用官方文档中离子滑片提供的方法。在此处检查了其他答案，但似乎所有人都将离子4与离子3混淆了，并提供了适用于离子3的答案。

我想获取幻灯片的有效索引。有关如何实施的联机文档尚不完善。

Answer 1

使用幻灯片ID和在活动幻灯片更改后发出的功能在HTML中构建滑块。

<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() {
  }

  getIndex() {
    console.log(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（）方法的返回类型为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

静态：是

std::shared_ptr<BaseExtended> de = new DerivedExtended(v1, 1, v2, 2);

Answer 7

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

@NgModule({
  declarations: [MySliderComponent]
})

离子滑动方法不适用于离子4

7 个答案: