tindakan pemuatan ionik


$ionicLoading ialah kesan interaksi pemuatan lalai bagi ionik. Kandungan di dalam juga boleh diubah suai dalam templat.

Penggunaan

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

Kaedah

Tunjukkan kesan pemuatan. 

show(opts)
ParameterJenisButiran
pilihanobjek
参数类型详情
optsobject

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

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

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

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

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

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

Pilihan untuk penunjuk pemuatan. Atribut yang tersedia:

  • {string=} template Kandungan html penunjuk.

  • {string=} templateUrl Url yang memuatkan templat html sebagai kandungan penunjuk.
    属性类型详情
    delegate-handle
    (可选)
    		字符串

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

    show-delete
    (可选)
    		布尔值

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

    show-reorder
    (可选)
    		布尔值

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

    can-swipe
    (可选)
    		布尔值

    列表项是否被允许滑动显示选项按钮。默认：true。

  • {boolean=} noBackdrop Sama ada hendak menyembunyikan latar belakang. Ia akan dipaparkan secara lalai.

  • {number=} kelewatan Berapa milisaat penunjuk ditangguhkan untuk dipaparkan. Lalainya ialah tiada kelewatan.

  • {number=} tempoh Berapa milisaat untuk menunggu sebelum menyembunyikan penunjuk secara automatik. Secara lalai, penunjuk kekal dipaparkan sehingga .hide() dicetuskan.

Sembunyikan kesan pemuatan. 

hide()

API

PropertiJenisButiran
pemegang wakil
(pilihan)
 String

Hendal ini mentakrifkan senarai dengan $ionicListDelegate.

tunjukkan-padam
(pilihan)

boolean< /kod >

Sama ada butang padam item senarai sedang dipaparkan atau tersembunyi.

tunjukkan-susun semula
(pilihan)
BooleanSama ada butang isihan item senarai sedang dipaparkan atau tersembunyi. <🎜>
boleh leret
(pilihan)<🎜>
Boolean<🎜>Sama ada item senarai dibenarkan untuk meluncur untuk memaparkan butang pilihan. Lalai: benar. <🎜>
<🎜><🎜>Contoh<🎜><🎜>Kod 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>
<🎜>Kod 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<🎜><🎜>Tetapkan pilihan lalai untuk memuatkan:<🎜><🎜>Penggunaan:<🎜>rreee<🎜>
←
→