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

【问题标题】：How to slide manually to the next slide in ion-slide如何在 ion-slide 中手动滑动到下一张幻灯片
【发布时间】：2020-06-17 15:54:11
【问题描述】：

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

【问题讨论】：

标签： ionic-framework ionic4

【解决方案1】：

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

home.ts

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


 export class HomePage {

      @ViewChild('mySlider')  slides: IonSlides;

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

    }

home.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>

【讨论】：

嗨@Tahseen，你能详细说明一下离子滑道内的水平滚动 Ref. Url
点击时有什么方法可以滑到最后一边？

【解决方案2】：

在 Angular 8 中：

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

【讨论】：

【解决方案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>

【讨论】：

【解决方案4】：

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

import { Slides } from 'ionic-angular';

class abc {
  @ViewChild(Slides)slides: Slides;

  public next(){
    this.slides.slideNext();
  }

  public prev(){
    this.slides.slidePrev();
  }
}

【讨论】：