如何在離子應用程序中添加進度條

Question

我真的需要你的幫助，我是離子項目的新手。目前正在從事一個項目。這個應用程序使用$ http從wordpress中獲取博客文章。如何添加進度條來告訴用戶頁面正在加載，而不是空白屏幕？由於

Answer 1

您可以使用$ionicLoading

可以用於指示活動，同時阻止用戶交互的疊加。

加載在控制器內被觸發。首先我們需要在控制器中注入$ ionicLoading作爲依賴。之後，我們需要調用$ ionicLoading.show（）方法並加載。爲了禁用它，有$ ionicLoading.hide（）方法。

例子： -

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

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

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

Read this for more information

Answer 2

您可以使用$httpProvider.interceptors跟蹤http電話。

您可以找到工廠寫在你的項目中添加以下代碼 here

或者

你可以做到這一點，以顯示離子裝載機。

添加以下代碼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() 
     }) 

添加以下代碼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 
      } 
     } 
    }) 

Answer 3

使用$ionicLoading指令來顯示和隱藏的好手。這是一個例子。在之前撥打show()，然後在.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(); 
     }); 
});