如何在 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();
  }

内部图片标签提供了一些 gif 图片，效果很好我已经测试过了

输出

Answer 2

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

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

所以从导入 LadingController 开始

import { LoadingController } from 'ionic-angular';

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

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() 方法会隐藏加载指示器，以便您可以继续与您的应用正常交互。

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

How to implement spinner with loading controller in ionic 3?

loader

spinner

ionic-framework

ionic2

ionic3