Question

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

Answer 1

在Angular 8中：

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

Answer 2

很简单，只是在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 3

您需要先导入这些

从'@ angular / core'导入{ViewChild}; 从“离子角”导入{幻灯片};

在您的课堂上打电话

 @ViewChild('slides') slides: Slides;

幻灯片引用您的HTML页面上的离子幻灯片

<ion-slides #slides>
   <ion-slide>
   </ion-slide>

   <ion-slide>
   </ion-slide>

  <button type="submit" float-left ion-button  color="primary" class="btnPrev" (click)="prev()">Prev</button>
  <button type="submit" float-right ion-button color="primary" class="btnNext" (click)="next()">Next</button>

</ion-slides>

添加这些方法

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

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

然后您就去了。希望这会有所帮助

Answer 4

简单方式（与上述答案相同，但我尝试简化）：

import { Slides } from 'ionic-angular';




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

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

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

Answer 5

是的，我找到了解决方案。在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>

如何手动滑动到离子幻灯片中的下一张幻灯片

5 个答案: