如何修复 ios 上的离子载玻片变形宽度?
How to fix ion-slides deformed width on ios?
有时 iOS 上的 ion-slides
变形(ion-slide
宽度错误并溢出)。
设置 width: 100% !important
和 overflow: hidden
部分解决了这个问题,但带来了一个新的错误,即最后一张幻灯片后的白色 space 死机屏幕。
使用 slides.update()
函数无法解决问题 (ionic 3)。
如何解决这个问题?
我的 ion-slides
在 HTML 页面中进行了硬编码。
所以,我将幻灯片数据打包到 ts
文件中的一个数组中,并在 ionViewWillLoad()
之后使用 *ngFor
循环 ion-slide
标签,延迟 1 秒解雇了。
TS代码:
...
slides = null;
...
ionViewWillEnter() {
setTimeout(() => {
this.slides = [
{
imgSrc: "...",
header: "...",
text: "...",
action: "skip"
},
{
imgSrc: "...",
header: "...",
text: "...",
action: "skip"
},
{
imgSrc: "...",
header: "...",
text: "...",
action: "skip"
}
]
}, 1000);
}
HTML代码:
<ion-slides *ngIf="slides" pager>
<ion-slide *ngFor="let slide of slides">
<img [src]="slide.imgSrc" class="slide-image" />
<h2 class="text-heading">{{ slide.header }}</h2>
<p class="text-light" text-capitalize [innerHTML]="slide.text"></p>
<span (click)="goToMenu()" class="text-light" text-capitalize>{{ slide.action }}</span>
</ion-slide>
</ion-slides>
有时 iOS 上的 ion-slides
变形(ion-slide
宽度错误并溢出)。
设置 width: 100% !important
和 overflow: hidden
部分解决了这个问题,但带来了一个新的错误,即最后一张幻灯片后的白色 space 死机屏幕。
使用 slides.update()
函数无法解决问题 (ionic 3)。
如何解决这个问题?
我的 ion-slides
在 HTML 页面中进行了硬编码。
所以,我将幻灯片数据打包到 ts
文件中的一个数组中,并在 ionViewWillLoad()
之后使用 *ngFor
循环 ion-slide
标签,延迟 1 秒解雇了。
TS代码:
...
slides = null;
...
ionViewWillEnter() {
setTimeout(() => {
this.slides = [
{
imgSrc: "...",
header: "...",
text: "...",
action: "skip"
},
{
imgSrc: "...",
header: "...",
text: "...",
action: "skip"
},
{
imgSrc: "...",
header: "...",
text: "...",
action: "skip"
}
]
}, 1000);
}
HTML代码:
<ion-slides *ngIf="slides" pager>
<ion-slide *ngFor="let slide of slides">
<img [src]="slide.imgSrc" class="slide-image" />
<h2 class="text-heading">{{ slide.header }}</h2>
<p class="text-light" text-capitalize [innerHTML]="slide.text"></p>
<span (click)="goToMenu()" class="text-light" text-capitalize>{{ slide.action }}</span>
</ion-slide>
</ion-slides>