ionic 加载动作

$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)
参数 类型 详情
opts

object

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

  • {string=} template 指示器的html内容。
  • {string=} templateUrl 一个加载html模板的url作为指示器的内容。
  • {boolean=} noBackdrop 是否隐藏背景。默认情况下它会显示。
  • {number=} delay 指示器延迟多少毫秒显示。默认为不延迟。
  • {number=} duration 等待多少毫秒后自动隐藏指示器。默认情况下，指示器会一直显示，直到触发.hide()。

隐藏一个加载效果。

hide()

API

属性 类型 详情
delegate-handle

(可选)

字符串

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

(可选)

布尔值

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

(可选)

布尔值

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

(可选)

布尔值

列表项是否被允许滑动显示选项按钮。默认：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.itpon.com/static/ionic/css/ionic.min.css\" rel=\"stylesheet\">
    <script src=\"http://www.itpon.com/static/ionic/js/ionic.bundle.min.js\"></script>
  </head>
  <body ng-controller=\"AppCtrl\">
    
      <ion-view title=\"Home\">
        <ion-header-bar>
          <h1>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 设置
  };
});