如何在 ionic 3 中使用加载控制器实现微调器？

Question

我想在 ionic3 中实现带有加载控制器的微调器。我已经实现了简单的加载控制器。怎么做？提前致谢。

我当前的加载器

我想要这样的东西

Answer 1

presentLoadingCustom() {
    let loading = this.loadingCtrl.create({
      spinner: 'hide',
      content: `<img src="assets/img/gif.gif" />`,
      duration: 5000
    });

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

    loading.present();
  }

inside image tag 提供一些 gif 图像，效果很好，我已经测试过了

输出

Answer 2

Ionic 2&3 有一个内置服务，用于在应用程序在后台执行一些耗时的活动（例如从远程数据库加载数据）时阻止 UI 并向用户提供视觉反馈。

您只需使用 ionic-angular 模块中提供的 LoadingController

所以从导入 LadingController 开始

import { LoadingController } from 'ionic-angular';

然后创建一个属性并注入到类构造函数中

export class LoginPage {
loading: any;
constructor(public loadingController:LoadingController){...}
}

并在请求数据的方法中创建加载指示器

login() {
    this.loading = this.loadingController.create({ content: "Logging in ,please wait..." });
    this.loading.present();
    this.errors = "";
    //api service call
    this.authService.postData(this.userData, 'api/account/login').then((result) => {
      this.responseData = result;
      if (result != null) {
        this.loading.dismissAll();
        //console.log(result);
        this.common.setLocalData(DataKey.User.toString(), result);

        this.navCtrl.push(TabsPage);
      }
      else {
        this.loading.dismissAll();
        this.errors = "Nope, Try Again";
      }
    }, (err) => {
      this.loading.dismissAll();
      this.errors = "Nope, Try Again";
      // Error log
    });
  }

当您成功登录时，方法 dismissAll() 会隐藏加载指示器，以便您可以继续与您的应用正常交互。