イオンローディングアクション


$ionicLoading は、ionic のデフォルトの読み込み相互作用効果です。内部のコンテンツはテンプレートで変更することもできます。

使用方法

angular.module('LoadingApp', ['ionic'])
.controller('LoadingCtrl', function($scope, $ionicLoading) {
  $scope.show = function() {
    $ionicLoading.show({
      template: 'Loading...'
    });
  };
  $scope.hide = function(){
    $ionicLoading.hide();
  };
});

方法

ローディングエフェクトを表示します。

show(opts)
パラメータtype詳細
optsobjectobject

loading指示器的选项。可用属性:

  • {string=} template 指示器的html内容。

  • {string=} templateUrl 一个加载html模板的url作为指示器的内容。

  • {boolean=} noBackdrop 是否隐藏背景。默认情况下它会显示。

  • {number=} delay 指示器延迟多少毫秒显示。默认为不延迟。

  • {number=} duration 等待多少毫秒后自动隐藏指示器。默认情况下,指示器会一直显示,直到触发.hide()

隐藏一个加载效果。

hide()

API

  • {string=}templateUrl インジケーターのコンテンツとして HTML テンプレートをロードする URL。
  • 属性类型详情
    delegate-handle
    (可选)
    字符串

    该句柄定义带有$ionicListDelegate的列表。

    show-delete
    (可选)
    布尔值

    列表项的删除按钮当前是显示还是隐藏。

    show-reorder
    (可选)
    布尔值

    列表项的排序按钮当前是显示还是隐藏。

    can-swipe
    (可选)
    布尔值読み込みインジケーターのオプション。利用可能な属性:

    • {string=} template インジケーターの HTML コンテンツ。
    {boolean=} noBackdrop 背景を非表示にするかどうか。デフォルトで表示されます。
  • {number=} lay インジケーターの表示が遅れるミリ秒数。デフォルトでは遅延なしです。

  • {number=} duration インジケーターが自動的に非表示になるまで待機するミリ秒数。デフォルトでは、インジケーターは .hide() がトリガーされるまで表示されます。


  • 読み込みエフェクトを非表示にします。
    rreee

    api

    property
    🎜type🎜🎜details🎜🎜🎜🎜🎜🎜delegateハンドル
    (オプション) string 🎜 🎜🎜このハンドルは、$ionicListDelegate でリストを定義します。 🎜🎜🎜🎜🎜show-delete
    (オプション)🎜🎜🎜ブール値🎜🎜🎜 リスト項目の削除ボタンが現在表示されているか、非表示になっているか。 🎜🎜🎜🎜🎜show-reorder
    (オプション)🎜🎜🎜Boolean value🎜🎜🎜 リスト項目の並べ替えボタンが現在表示されているか、非表示になっているか。 🎜🎜🎜🎜🎜スワイプ
    (オプション)🎜🎜🎜ブール値🎜🎜🎜 リスト項目をスライドしてオプション ボタンを表示できるかどうか。デフォルト: true。 🎜🎜🎜🎜🎜🎜🎜例🎜🎜HTMLコード:🎜
    <html ng-app="ionicApp">
      <head>
        <meta charset="utf-8">
        <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width"> 
        
        <title>Ionic Modal</title>
    
         <link href="http://www.php.cn/static/ionic/css/ionic.min.css" rel="stylesheet">
        <script src="http://www.php.cn/static/ionic/js/ionic.bundle.min.js"></script>
      </head>
      <body ng-controller="AppCtrl">
        
          <ion-view title="Home">
            <ion-header-bar>
              <h1 class="title">The Stooges</h1>
            </ion-header-bar>
            <ion-content has-header="true">
              <ion-list>
                <ion-item ng-repeat="stooge in stooges" href="#">{{stooge.name}}</ion-item>
              </ion-list>
            </ion-content>
          </ion-view>
        
      </body>
    </html>
    🎜JavaScriptコード🎜
    angular.module('ionicApp', ['ionic'])
    .controller('AppCtrl', function($scope, $timeout, $ionicLoading) {
    
      // Setup the loader
      $ionicLoading.show({
        content: 'Loading',
        animation: 'fade-in',
        showBackdrop: true,
        maxWidth: 200,
        showDelay: 0
      });
      
      // Set a timeout to clear loader, however you would actually call the $ionicLoading.hide(); method whenever everything is ready or loaded.
      $timeout(function () {
        $ionicLoading.hide();
        $scope.stooges = [{name: 'Moe'}, {name: 'Larry'}, {name: 'Curly'}];
      }, 2000);
      
    });
    🎜🎜🎜🎜🎜$ionicLoadingConfig🎜🎜読み込みデフォルトオプションの設定:🎜🎜使用法:🎜
    var app = angular.module('myApp', ['ionic'])
    app.constant('$ionicLoadingConfig', {
      template: '默认加载模板……'
    });
    app.controller('AppCtrl', function($scope, $ionicLoading) {
      $scope.showLoading = function() {
        $ionicLoading.show(); //配置选项在 $ionicLoadingConfig 设置
      };
    });
    🎜