2016-07-12 1 views
1

タブを読み込む読み込みアニメーション(イオンに組み込まれた基本的な円形アニメーション)を表示したいと思います。私は$ ionicLoadingを試しましたが、私はスプラッシュ画面で動作させることができますが、個々のビューに組み込むのに問題があります。読み込み中のアニメーションが表示されている間はタブバーを表示したままにしておきますが、実際のビューは非表示にしておきます。イオンビューでの読み込みを表示するか、すべてのアプリケーションをキャッシュ/メモリに一度に読み込みますか?

私はここでスプラッシュ画面のロードのためのコードがあります。

angular.module('LoadingApp', ['ionic']) 
.controller('LoadingCtrl', function ($scope, $ionicLoading) { 
    $scope.show = function() { 
     $ionicLoading.show({ 
      template: 'Loading...', 
      noBackdrop: 'true', 
     }).then(function() { 
      console.log("The loading indicator is now displayed"); 
     }); 
    }; 
    $scope.hide = function() { 
     $ionicLoading.hide().then(function() { 
      console.log("The loading indicator is now hidden"); 
     }); 
    }; 
}) 

を、私は、ビュー内の同様の方法でそれを使用しようとしたが、何も表示されません。そのコードをビューでどのように使用するのですか?別の方法として、アプリ内のすべてをキャッシュ/ラムにロードして、別のタブをクリックするまでに時間差がないようにする方法があります。私のタブの中には、しばらく時間がかかり、テキストの後にポップインするイメージがあります。

+0

を表示するには、あなたが上に切り替えることができる要素をロードするにはfalseにブール値を初期化して、ページの仕上げ//ionicframework.com/docs/api/directive/ionView/)、ビューのhtmlファイルが読み込まれると通知されます。ビューのHTMLファイルのロードは、ビューのコンテンツとは別物であり、イメージはコンテンツの一部です。プリローダーサービスを作成して、コントローラーに移動したときにイメージをロードし、イメージがロードされるまでプリローダーを表示し、すべてのイメージがロードされると非表示にすることができます。 –

答えて

0

あなたはこの<ion-spinner icon="spiral"></ion-spinner>はアニメーションスピナーを示しhttp://ionicframework.com/docs/api/directive/ionSpinner/

を使用することができます。

ブーリアン「LoadingView」を使用して、スピナーを表示/非表示にすることができます。例:

<ion-spinner ng-show="LoadingView" icon="spiral"></ion-spinner> 
<div ng-show="!LoadingView" icon="spiral">Content of the tab</div> 

あなたはこれらの[ビューイベント](HTTP用に聞くことができ、あなたのタブのコンテンツ

+3

ページの読み込み時にブール値をどのように切り替えるのですか? $ on( 'pageloaded')関数がありますか? – Peter

関連する問題