如何在 Ionic 5 中为卡片添加向上/向下滑动行为

【问题标题】：How to add slide up/down behaviour for cards in Ionic 5如何在 Ionic 5 中为卡片添加向上/向下滑动行为
【发布时间】：2020-08-27 06:13:33
【问题描述】：

嘿，我正在寻找一段时间，但我找不到任何关于如何使上下刷卡以显示选项成为可能。

我想结合 ion-slides，通过从左到右移动，您可以浏览 trought 卡片（效果很好）以及向上或向下滑动卡片的选项（行为类似于 ion-item-sliding ，但在垂直轴上不是水平的）。有什么想法吗？

【问题讨论】：

标签： ionic-framework ionic5

【解决方案1】：

Ionic 使用 swiperjs 来管理 ion-slides。 https://swiperjs.com/api/ 您可以将参数'direction'传递给'vertical'，默认为'horizontal'

一个例子：https://swiperjs.com/demos/#vertical_slider 表示您的要求

另一个可以嵌套的例子：https://swiperjs.com/demos/#nested_swipers

您可以向左/向右滑动在第二张幻灯片上，您可以向上/向下滑动

在离子中：

<ion-slides [options]="{'direction': 'vertical'}">
  <ion-slide>
    <h1>Slide 1</h1>
  </ion-slide>
  <ion-slide>
    <h1>Slide 1</h1>
  </ion-slide>
</ion-slides>

【讨论】：