如何修复 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>