ionic 加載動(dòng)作

2018-10-13 19:02 更新

ionic 加載動(dòng)作

$ionicLoading 是 ionic 默認(rèn)的一個(gè)加載交互效果。里面的內(nèi)容也是可以在模板里面修改。

用法

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

方法

顯示一個(gè)加載效果。

show(opts)
參數(shù) 類(lèi)型 詳情
opts object

loading指示器的選項(xiàng)。可用屬性：

  • {string=} template 指示器的html內(nèi)容。
  • {string=} templateUrl 一個(gè)加載html模板的url作為指示器的內(nèi)容。
  • {boolean=} noBackdrop 是否隱藏背景。默認(rèn)情況下它會(huì)顯示。
  • {number=} delay 指示器延遲多少毫秒顯示。默認(rèn)為不延遲。
  • {number=} duration 等待多少毫秒后自動(dòng)隱藏指示器。默認(rèn)情況下，指示器會(huì)一直顯示，直到觸發(fā).hide()。

隱藏一個(gè)加載效果。

hide()

API

屬性 類(lèi)型 詳情
delegate-handle
(可選)
 字符串

該句柄定義帶有$ionicListDelegate的列表。
show-delete
(可選)
 布爾值

列表項(xiàng)的刪除按鈕當(dāng)前是顯示還是隱藏。
show-reorder
(可選)
 布爾值

列表項(xiàng)的排序按鈕當(dāng)前是顯示還是隱藏。
can-swipe
(可選)
 布爾值

列表項(xiàng)是否被允許滑動(dòng)顯示選項(xiàng)按鈕。默認(rèn)：true。

實(shí)例

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="//www.o2fo.com/statics/demosource/ionic.min.css" rel="stylesheet">
    <script src="//www.o2fo.com/statics/demosource/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

設(shè)置加載的默認(rèn)選項(xiàng):

用法:

var app = angular.module('myApp', ['ionic'])
app.constant('$ionicLoadingConfig', {
  template: '默認(rèn)加載模板……'
});
app.controller('AppCtrl', function($scope, $ionicLoading) {
  $scope.showLoading = function() {
    $ionicLoading.show(); //配置選項(xiàng)在 $ionicLoadingConfig 設(shè)置
  };
});
以上內(nèi)容是否對(duì)您有幫助：
在線筆記
App下載
App下載

掃描二維碼

下載編程獅App

公眾號(hào)
微信公眾號(hào)

編程獅公眾號(hào)