Ionic 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 属性设置为 'vertical':

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>

Ionic 5垂直滑动

Ionic 5 vertical slide

html

ionic-framework

ionic4

ionic5