我正在创建一个带有离子幻灯片的简单屏幕。在最后一张幻灯片上,我想显示一个按钮以弹出屏幕。
我已经使用以下代码完成了此操作:
在我的HTML中
<section>
<ion-slides (ionSlideDidChange)="change()" (ionSlideReachEnd)="end()" class="slider" pager="true" paginationType="bullet" parallax="true"
centeredSlides="true" effect="slide" [options]="slideOpts">
<ng-container *ngFor="let image of imgs;">
<ion-slide>
<section>
<h1><img src={{image}}></h1>
</section>
</ion-slide>
</ng-container>
</ion-slides>
<div class="skip" *ngIf="!isSlideLast()" (click)="skip()">Skip</div>
<div class="next" *ngIf="!isSlideLast()" (click)="next()">Next</div>
<button class="start" *ngIf="isSlideLast()" (click)="skip()">Start</button>
</section>
在我的.ts中,我有这些:
max_slide:any =3;
last: boolean = false;
callback: any;
imgs:any = [];
slideOpts = {
initialSlide: 0,
speed: 400
};
isSlideLast() {
return this.last
}
async skip() {
console.log("skip is pressed")
this.callback().then(() => {
this.navCtrl.pop();
});
}
change() {
this.slides.getActiveIndex().then(val => {
console.log(val)
if (val < this.max_slide-1) {
this.last = false;
}
})
}
end() {
console.log("end is pressed")
this.last = true;
}
next() {
console.log("next is pressed")
this.slides.slideNext();
}
其他iPhone和android没有问题。该按钮显示在最后一张幻灯片上。但是在使用iPhone X进行测试时,该按钮根本没有显示。跳过和下一个链接也不会隐藏。