如何手动滑到离子载玻片中的下一张载玻片

Question

我在ionic4中使用离子幻灯片，我想通过单击按钮手动转到下一张幻灯片。我已经看过离子幻灯片文档，其中提到了slideNext方法。但是我不知道如何使用这种方法来更改幻灯片。

Answer 1

是的，我得到了解决方案。在 ionic 4 中，您必须导入 IonSlides 而不是 Slides。

首页

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

 export class HomePage {
      @ViewChild('mySlider')  slides: IonSlides;
      swipeNext(){
        this.slides.slideNext();
      }
    }

首页.html

 <ion-slides pager="true"  pager="false" #mySlider>
   <ion-slide>
   </ion-slide>
   <ion-slide>
   </ion-slide>
    <ion-button (click)="swipeNext()">Next</ion-button>
 </ion-slides>

Answer 2

在 Angular 8 中：

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

Answer 3

在 html 中很简单，只是必需

的

<ion-slides #slides pager="true">
   <ion-slide>1
   </ion-slide>
   <ion-slide>2
   </ion-slide>
 </ion-slides>
  <ion-button (click)="slides.slidePrev()" > Prev </ion-button>
  <ion-button (click)="slides.slideNext()" > Next </ion-button>

Answer 4

简单的方法(与上面的答案相同，但我试图让它更简单(：

import { Slides } from 'ionic-angular';
class abc {
  @ViewChild(Slides)slides: Slides;
  public next(){
    this.slides.slideNext();
  }
  public prev(){
    this.slides.slidePrev();
  }
}