web-dev-qa-db-fra.com

Comment implémenter spinner avec contrôleur de chargement dans ionic 3?

Je veux implémenter spinner avec contrôleur de chargement dans ionic3. J'ai implémenté le contrôleur de chargement simple. comment faire? Merci d'avance.

Mon chargeur actuel

 enter image description here

Je veux quelque chose comme ça

 enter image description here

ionic-frameworkionic2spinnerionic3loader
7
Niraj
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();
  }

à l'intérieur de la balise image donne une image gif et cela fonctionne très bien je l'ai testé 

Sortie  imag

7
Mohan Gopi

Ionic 2 & 3 dispose d'un service intégré permettant de bloquer l'interface utilisateur et de fournir un retour visuel aux utilisateurs lorsque l'application exécute une activité fastidieuse en tâche de fond, telle que le chargement de données depuis une base de données distante.

Vous utilisez simplement le LoadingController qui est disponible à partir du module ionic-angular

Alors commencez par importer LadingController

import { LoadingController } from 'ionic-angular';

Créez ensuite une propriété et injectez-la dans le constructeur de la classe.

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

et créer un indicateur de chargement dans la méthode d'où demander les données

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
    });
  }

Lorsque vous êtes connecté avec succès à la méthode licencierAll () masque l'indicateur de chargement afin que vous puissiez continuer à interagir avec votre application normalement.

2
Manveer Singh