我有start.html
文件,其中包含选项属性,我将在类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'
};
}
答案 0 :(得分: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>
答案 1 :(得分:0)
您可以通过添加“ direction”参数使幻灯片垂直放置。
<ion-slides direction="vertical">
</ion-slides>
默认情况下,幻灯片是水平的。
答案 2 :(得分:0)
在新版本的ionic中,我们可以通过将[options]
的值传递给<ion-slides>
来轻松实现垂直滚动。
这里是一个例子。
// page.ts
export class SlideClass {
slideOptions = {
direction: 'vertical',
};
constructor(){}
}
// html file
<ion-slides [options]="slideOptions">
更多选项,我们可以在这里more slide options