Question

我有一个使用Ionic 1构建的应用程序。我已将该应用程序升级到Ionic3。这样做时，我遇到了麻烦。这是因为我无法在Ionic 3中创建与Ionic 1相同的微调器。这是Ionic 1中微调器的视频。

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

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加载程序gif。将此gif放置到资产文件夹，并在.custom-spinner-box类中链接gif。

Answer 2

虽然您需要自定义刷新，但是为此您需要对代码进行一些修改。这是-

将此添加到app.scss文件中

  [ng-reflect-name="customcircles"]{
    background-image: url('https://loading.io/spinners/cutiefox/lg.cutie-fox-spinner.gif');
    background-size: cover;
  }

 <ion-refresher (ionRefresh)="doRefresh($event)">
    <ion-refresher-content 
    refreshingSpinner="customcircles">
    </ion-refresher-content>
  </ion-refresher>

并将其添加到.HTML文件中。
我希望你明白了。

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

2 个答案: