Действие загрузки 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)
Параметр Type Подробности
opts object

Опции для индикатора загрузки. Доступные свойства:

  • {string=} templateHTML-содержимое индикатора.
  • {string=} templateUrlURL-адрес для загрузки HTML-шаблона в качестве содержимого индикатора.
  • {boolean=} noBackdropСкрывать ли фон. По умолчанию он будет показан.
  • {number=} delayСколько миллисекунд задержки перед показом индикатора. По умолчанию задержки нет.
  • {number=} durationСколько миллисекунд ждать перед автоматическим скрытием индикатора. По умолчанию индикатор отображается до срабатывания..hide()。

Скрыть эффект загрузки.

hide()

API

Свойство Type Подробности
delegate-handle
(Необязательно)
 string

Этот дескриптор определяет список с$ionicListDelegateсписок.
show-delete
(Необязательно)
 Boolean value

Показывается ли в данный момент кнопка удаления элемента списка или скрыта.
show-reorder
(Необязательно)
 Boolean value

Отображается ли в данный момент кнопка изменения порядка элемента списка или скрыта.
can-swipe
(Необязательно)
 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="../static/ionic/css/ionic.min.css" rel="stylesheet">
    <script src="../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="../index.html">{{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 设置
  };
});
Другие расширения