如何解决如何修复 ios 上的 ion-slides 变形宽度?
iOS 上的 ion-slides
有时会变形(ion-slide
的宽度错误并溢出)。
设置 width: 100% !important
和 overflow: hidden
部分解决了问题,但带来了一个新错误,即最后一张幻灯片后的空白屏幕。
使用 slides.update()
函数不能解决问题(ionic 3)。
如何解决这个问题?
解决方法
我的 ion-slides
被硬编码在 HTML 页面中。
因此,我将幻灯片数据打包到 ts
文件中的数组中,并在 ion-slide
触发后使用 *ngFor
循环 ionViewWillLoad()
标记,延迟为 1 秒。
TS 代码:
...
slides = null;
...
ionViewWillEnter() {
setTimeout(() => {
this.slides = [
{
imgSrc: "...",header: "...",text: "...",action: "skip"
},{
imgSrc: "...",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>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。