0

Ich brauche wirklich Ihre Hilfe, ich bin neu zu ionischen Projekt. Derzeit arbeite ich an einem Projekt. Diese App zieht Blog-Post von WordPress mit $ http. Wie kann ich einen Fortschrittsbalken hinzufügen, um den Benutzern zu sagen, dass die Seite geladen wird, anstatt einen leeren Bildschirm zu haben? DankWie füge ich einen Fortschrittsbalken in ionic app hinzu

Antwort

0

können Sie $ionicLoading

Ein Overlay verwenden, die Aktivität verwendet werden kann, um anzuzeigen, während Interaktion mit dem Benutzer zu blockieren.

Das Laden wird im Controller ausgelöst. Zuerst müssen wir $ ionicLoading in unseren Controller als Abhängigkeit injizieren. Danach müssen wir die $ ionicLoading.show() -Methode aufrufen und das Laden erscheint. Um es zu deaktivieren, gibt es die $ ionicLoading.hide() Methode.

Beispiel: -

.controller('myCtrl', function($scope, $ionicLoading) { 

    $scope.showLoading = function() { 
     $ionicLoading.show({ 
     template: 'Loading...' 
     }); 
    }; 

    $scope.hideLoading = function(){ 
     $ionicLoading.hide(); 
    }; 
}); 

Read this for more information

0

können Sie $httpProvider.interceptors verwenden, um die http Anrufe zu verfolgen.

können Sie finden Werk geschrieben here

Oder

Sie Ionic loader zeigen dies erreichen können unter Code in Ihrem Projekt durch Hinzufügen.

unten Code hinzufügen in angular.module('app',[]).run(...)

 $rootScope.$on('loading:show', function() { 
      $ionicLoading.show({ template: '<ion-spinner class="spinner-assertive"></ion-spinner>' }) 
     }) 

     $rootScope.$on('loading:hide', function() { 
      $ionicLoading.hide() 
     }) 

unten Code hinzufügen in angular.module('app',[]).config(...)

$httpProvider.interceptors.push(function ($rootScope) { 
     return { 
      request: function (config) { 
       $rootScope.$broadcast('loading:show') 
       return config 
      }, 
      response: function (response) { 
       $rootScope.$broadcast('loading:hide') 
       return response 
      } 
     } 
    }) 
0

Verwenden $ionicLoading Richtlinie eine Schleuder zu zeigen und zu verstecken. Hier ist ein Beispiel. Rufen Sie einfach den show() vor dem $http Anruf an und verstecken Sie sich nach dem .success().

controller('myCtrl', function($scope, $ionicLoading) { 
    $ionicLoading.show({ 
    template: '<ion-spinner icon="android"></ion-spinner>' 
    }); 
    $http({ 
     method: 'POST', 
     url: 'http://example.com', 
    }) 
     .success(function(){ 
      $ionicLoading.hide(); 
     }); 
}); 
Verwandte Themen