ionic3 - 如何在 Ionic 3 中创建自定义加载微调器

Question

我有一个使用 Ionic 1 构建的应用程序。我将此应用程序升级到 Ionic 3。在执行此操作时，我遇到了麻烦。这是我无法在 Ionic 3 中创建与 Ionic 1 相同的微调器。这是 Ionic 1 中的微调器的视频。

为 Ionic 1 加载微调器视频

另外，这是我在 Ionic 3 中创建的视频 。期待收到一个好的解决方案。

标签： ionic3spinner

Answer 1

您可以使用此代码创建自定义加载程序。

presentLoadingCustom() {
  let loading = this.loadingCtrl.create({
    spinner: 'hide',
    content: `
      <div class="custom-spinner-container">
        <div class="custom-spinner-box">
           <img src="assets/imgs/loader.gif" />
        </div>
      </div>`,
    duration: 5000
  });

  loading.onDidDismiss(() => {
    console.log('Dismissed loading');
  });

  loading.present();
}

之后创建一个动画 gif 用于加载目的。现在，您可以使用此站点下载 gif loader gif。将此 gif 放入 assets 文件夹并在.custom-spinner-box类中链接 gif。