Ionic 4 微调器动画答案

【问题标题】：Ionic 4 spinner animationIonic 4 微调器动画
【发布时间】：2019-03-07 19:06:28
【问题描述】：

我似乎可以弄清楚为什么 ionic 4 旋转器在旋转时不尊重其边界，我正在使用 android version 8.0.0

Ionic:

   ionic (Ionic CLI)             : 4.11.0 (/home/yushin/.nvm/versions/node/v11.9.0/lib/node_modules/ionic)
   Ionic Framework               : @ionic/angular 4.0.0
   @angular-devkit/build-angular : 0.12.4
   @angular-devkit/schematics    : 7.2.4
   @angular/cli                  : 7.2.4
   @ionic/angular-toolkit        : 1.3.0

Cordova:

   cordova (Cordova CLI) : 8.1.2 (cordova-lib@8.1.1)
   Cordova Platforms     : android 7.1.4
   Cordova Plugins       : cordova-plugin-ionic-keyboard 2.1.3, cordova-plugin-ionic-webview 3.1.2, (and 20 other plugins)

System:

   Android SDK Tools : 26.1.1 (/home/yushin/Android/Sdk)
   NodeJS            : v11.9.0 (/home/yushin/.nvm/versions/node/v11.9.0/bin/node)
   npm               : 6.8.0
   OS                : Linux 4.13

【问题讨论】：

请不要因为使用 android-studio 标签而标记问题：Android Studio 标签应该仅在您对 IDE 本身有疑问时使用，而不是您在其中编写（或想要编写）的任何代码。请参阅 when is it appropriate to remove an IDE tag、How do I avoid misusing tags? 和 the tagging guide。另外，请创建一个minimal reproducible example
可以显示微调器代码吗？
你能添加一些代码吗？
我用过 ion-spinner 我没有像你一样在 UI 中遇到这个问题。你能发布你的代码吗？
大声笑不再使用离子...

标签： android ionic-framework sass ionic4

【解决方案1】：

我在使用 Android 加载程序时遇到了同样的问题。理想情况下，ion-spinner 的 CSS 应更新为：

:host(.spinner-crescent) svg {
    transform-origin: 40% 40%!important;
}

但是，由于 Ionic 4 现在使用 shadow dom，您将无法从外部将其应用于组件。

我找到的解决方案是使用替代微调器（例如圆圈）。

let loading = await this.loadingController.create({
    message: message,
    spinner: 'circles'
});
await loading.present();

【讨论】：