离子5垂直幻灯片

Question

我使用ionic 5，我希望在我的应用程序中有一个从底部到顶部的垂直幻灯片。我试着实现它，但它不起作用。

<ion-slides pager direction="vertical">
  <ion-slide>

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

Answer 1

direction不是ion-slides元素的属性，它是swiper的配置选项。

要在Ionic中使用它，请将ion-slides选项上的direction属性设置为‘ion-slides’：

slideOpts = {
    direction: 'vertical',
    initialSlide: 0,
    speed: 400,
};

您的HTML模板应该已经包含如下内容：

<ion-slides pager="true" [options]="slideOpts">
    <ion-slide>
        <h1>Slide 1</h1>
    </ion-slide>
    <ion-slide>
        <h1>Slide 2</h1>
    </ion-slide>
    <ion-slide>
        <h1>Slide 3</h1>
    </ion-slide>
</ion-slides>