如何在ion-slide中手动滑动到下一张幻灯片

Question

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

Answer 1

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

家.ts

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>