Как реализовать spinner с контроллером загрузки в ionic 3?

Я хочу реализовать spinner с контроллером загрузки в ionic3 . Я реализовал простой контроллер загрузки . как это сделать? Спасибо заранее.

мой текущий загрузчик

enter image description here

Я хочу что-то вроде этого

enter image description here

6
ionic-framework ionic2 ionic3 loader spinner

2 ответов

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, и он отлично работает, я его протестировал

выход imag

4

Ionic 2&3 имеет встроенный сервис для блокировки пользовательского интерфейса и предоставления визуальной обратной связи пользователям, когда приложение выполняет некоторые трудоемкие действия на фоне, такие как загрузка данных из удаленной базы данных .

вы просто используете 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() скрывает индикатор загрузки, чтобы вы могли продолжать нормально взаимодействовать с вашим приложением.

1