使离子载玻片垂直滑动

Rav*_*kar 5 javascript ionic-framework ionic2

我有一个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>
Run Code Online (Sandbox Code Playgroud)

开始.ts:

export class StartPage {
    option1 = {
        loop: true,
        direction: 'vertical'
    };
}
Run Code Online (Sandbox Code Playgroud)

小智 4

您需要在组件中添加选项,ion-slides如其文档中所示。

<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>
Run Code Online (Sandbox Code Playgroud)