如何修复 ios 上的离子载玻片变形宽度？

Question

有时 iOS 上的 ion-slides 变形（ion-slide 宽度错误并溢出）。

设置 width: 100% !important 和 overflow: hidden 部分解决了这个问题，但带来了一个新的错误，即最后一张幻灯片后的白色 space 死机屏幕。

使用 slides.update() 函数无法解决问题 (ionic 3)。

如何解决这个问题？

Answer 1

我的 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 上的离子载玻片变形宽度？

How to fix ion-slides deformed width on ios?

ionic-framework

ionic3

ion-slides