Ionic 3 加载控制器背景设计答案

【问题标题】：Ionic 3 loading controller backdrop designIonic 3 加载控制器背景设计
【发布时间】：2018-01-05 10:07:56
【问题描述】：

我正在 iPhone (iOS 10/11) 上使用 Ionic 3，我想知道是否可以有不同样式/设计的加载控制器背景。我需要在某些地方背景覆盖屏幕的整个高度，而在某些地方只需要中间（屏幕的一部分）。

到目前为止，我正在通过 app.scss 执行此操作：

.loading-ios {
  background-color: white;
  opacity: 1 !important;
  position: fixed;
  top: 44px;
  bottom: 49.5px;
}

但是这样的背景在任何地方都是一样的。尝试在本地 scss 文件中执行此操作是行不通的，因为 app.scss 会（自然地）覆盖它们。

有什么办法吗？

这是一个示例添加，但带有注释掉的 SCSS 代码，因为我不知道在 STackblitz 中的何处添加自定义样式：https://stackblitz.com/edit/ionic-sqou2x

【问题讨论】：

能否请您创建一个 Stackblitz 项目，以便我们在那里测试一些东西？
您可以通过cssClass 选项为每次加载添加特殊类，然后为其设置样式。
@Duannx 据我所知，cssClass 只设置加载器的内框/区域，而不是背景。我需要背景覆盖 100%，在某些情况下只覆盖屏幕高度的 70%。
@sebaferreras 我在stackblitz.com/edit/ionic-sqou2x 创建了它，但我不知道在哪里添加我的自定义 SCSS 代码，我找不到任何样式表文件。
@Dimitri: cssClass 将类添加到ion-loading，这样您就绝对可以为背景应用样式。只需检查加载元素并找到类。

【解决方案1】：

首先，通过cssClass为你的加载添加一个类：

this.loadingCtrl.create({
     content: "login",
     cssClass: "my-loading"
}).present();

其次，在app.scss中为.my-loading添加样式：

.my-loading {
    ion-backdrop {
        top: 15%;
        height: 70%; 
    }
}

【讨论】：