在 iOS Ionic 4 上看不到 Ion fab答案

【问题标题】：Can not see Ion fab in modal on iOS Ionic 4在 iOS Ionic 4 上看不到 Ion fab
【发布时间】：2020-08-21 12:20:00
【问题描述】：

我创建了一个组件并在其中添加了一个离子工厂。当我将组件作为模态打开时，不会显示离子工厂。当我在应该显示的位置单击一次时，但是当我关闭模式并再次打开它时，我看不到它。

我认为这是因为我有一个自定义 css 类，但即使没有它，我仍然无法看到离子工厂，直到我点击它应该在的地方。

问题仅在 iOS 上，在 Android 上按预期工作。

这是我的代码：打开模态函数：

 async addCollection(item) {
    item.isAdded = !item.isAdded;

    let modal = await this.modalCtrl.create(
      {
        component: AddCollectionComponent,
        cssClass: 'add-collection-custom-modal-css',
        backdropDismiss: true 
      }
    );

    await modal.present();
    let data = await modal.onDidDismiss();
  }

css 类：

.add-collection-custom-modal-css .modal-wrapper {
    height: 70vh;
    bottom: 0;
    position: absolute;
    display: block;
    width: 100%;
    border-radius: 12px;
}

AddCollection 组件

<ion-content>

  <ion-row>
    <ion-searchbar placeholder="Search collections"></ion-searchbar>
  </ion-row>

  <ion-row style="margin: 15px;">
    <ion-col class="add-collection-header">
      RECENT
    </ion-col>

    <ion-col>

    </ion-col>
  </ion-row>

  <ion-list *ngIf="mockRecentData" class="gray-bottom-line" lines="none" style="padding-bottom: 20px;">
    <ion-item *ngFor="let recent of mockRecentData">
      <ion-avatar item-start class="avatar-small">
        <img src="assets/noavatar.png">
      </ion-avatar>

      <h2 class="avatar-text">{{recent}}</h2>
    </ion-item>
  </ion-list>

  <ion-row style="margin: 15px;">
    <ion-col class="add-collection-header">
      YOUR BOARDS
    </ion-col>

    <ion-col>

    </ion-col>
  </ion-row>

  <ion-list *ngIf="mockYourBoards" lines="none">
    <ion-item *ngFor="let recent of mockYourBoards">
      <ion-avatar item-start class="avatar-small">
        <img src="assets/noavatar.png">
      </ion-avatar>

      <h2 class="avatar-text">{{recent}}</h2>
    </ion-item>
  </ion-list>

</ion-content>

<ion-fab vertical="bottom" horizontal="end" slot="fixed">
  <ion-fab-button (click)="save()" size="small" color="white">
    <fa-icon style="color: violet" [icon]="['fas', 'plus']"></fa-icon>
  </ion-fab-button>
</ion-fab>

【问题讨论】：

您可以尝试将 style="z-index:99;" 添加到中。我怀疑，在视图中，模态框被放置在其他所有东西之上，这就是为什么您的工厂不可见的原因..
是的，模态被放置在离子晶圆厂上方，但添加了 style="z-index:99;"到什么都不做。
@DinoSaciragic 你有没有找到解决方案？我有完全相同的问题，似乎没有什么可以解决的！
哦，其实我想我只是想通了。对我来说，如果 ion-fab 在 div 内，然后在 ion-content 内，它就可以工作。所以像：
..... .

标签： ios angular ionic-framework ionic4

【解决方案1】：

这里有两件事需要考虑 -

1。根据 Ionic 的文档，Modal 是一个显示在应用程序内容顶部的对话框。这意味着模态框将始终出现在应用程序的最顶层。这就是为什么如果您有一个选项卡式应用并打开一个模态，所有选项卡都将隐藏在模态页面下方。

2。与 Fab 按钮一样，这里 Ionic 说，“FAB 通常浮动在固定位置的内容上。这不能仅通过使用 FAB 来实现。它们需要用组件包裹才能固定在内容上。”

因此，您可以尝试不包装您的<ion-fab-button> 与ion-fab。您可以通过 Modal Component 的 SCSS 文件将 <ion-fab-button> 放置在 modal 上的固定位置。

【讨论】：

我也试过这个。它没有按预期工作。我怀疑这与 Ionic 和 Cordova 的版本有关。

【解决方案2】：

作为一种解决方法，通过设置在模态内部的固定晶圆厂上调用硬件加速

ion-fab {
    transform: translateZ(0);
}

参考：CSS performance relative to translateZ(0)

【讨论】：