时间戳

首页 > 解决方案 > 如何在 Ionic 5 中为卡片添加向上/向下滑动行为

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

问题描述

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

我想结合 ion-slides，通过从左到右移动，您可以浏览卡片（效果很好），并可以选择向上或向下滑动卡片以获取选项（行为类似于 ion-item-sliding，但在垂直轴的水平）。任何想法？

标签： ionic-frameworkionic5

解决方案

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

一个例子：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>

推荐阅读