使离子载玻片垂直滑动答案

【问题标题】：Making ion slides slide vertically使离子载玻片垂直滑动
【发布时间】：2020-07-15 22:10:41
【问题描述】：

我有 start.html 文件，该文件具有的 options 属性，我将在 StartPage 类的 options1 中定义它们

<ion-slide [options]="option1" *ngFor="let slide of slides; let last = last">
  <img [src]="slide.image" class="slide-image"/>
  <h2 class="slide-title" [innerHTML]="slide.title" style=""></h2>
  <p [innerHTML]="slide.description"></p>

  <div id="skip-b">
    <button (click)="dismiss()">
      {{last ? "Let's Begin" : "Skip" }}
      <ion-icon name="arrow-forward"></ion-icon>
    </button>
  </div>
</ion-slide>

start.ts:

export class StartPage {
    option1 = {
        loop: true,
        direction: 'vertical'
    };
}

【问题讨论】：

标签： javascript ionic-framework ionic2

【解决方案1】：

您需要在ion-slides 组件中添加选项，如其docs 所示。

<ion-slides [options]="option1">
    <ion-slide *ngFor="let slide of slides; let last = last">
        <img [src]="slide.image" class="slide-image" />
        <h2 class="slide-title" [innerHTML]="slide.title" style=""></h2>
        <p [innerHTML]="slide.description"></p>

        <div id="skip-b">
            <button (click)="dismiss()">
      {{last ? "Let's Begin" : "Skip" }}
      <ion-icon name="arrow-forward"></ion-icon>
    </button>
        </div>
    </ion-slide>
</ion-slides>

【讨论】：

【解决方案2】：

在新版本的 ionic 中，我们可以通过将[options] 值传递给<ion-slides> 轻松实现垂直滚动。

这是一个例子。

// page.ts
export class SlideClass {
  slideOptions = {
    direction: 'vertical',
  };
  constructor(){}
 
}

// html file
<ion-slides [options]="slideOptions">

我们可以在这里找到更多选项more slide options

【讨论】：

【解决方案3】：

您可以通过添加 ''direction'' 参数使幻灯片垂直。

<ion-slides direction="vertical">

</ion-slides>

默认情况下幻灯片是水平的。

【讨论】：