【Ionic】---$ionicLoading ion-spinner SVG旋轉加載的動畫圖標

時間 2019-11-12

標籤 Ionic ionicloading ion spinner svg 旋轉加載動畫圖標简体版

原文原文鏈接

ionic 加載動做 $ionicLoading

$ionicLoading 是 ionic 默認的一個加載交互效果。裏面的內容也是能夠在模板裏面修改。php

用法

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

方法

顯示一個加載效果。css

show(opts)

參數類型詳情

opts

參數	類型	詳情
opts	`object`	loading指示器的選項。可用屬性：html `{string=}` `template` 指示器的html內容。 `{string=}` `templateUrl` 一個加載html模板的url做爲指示器的內容。 `{boolean=}` `noBackdrop` 是否隱藏背景。默認狀況下它會顯示。 `{number=}` `delay` 指示器延遲多少毫秒顯示。默認爲不延遲。 `{number=}` `duration` 等待多少毫秒後自動隱藏指示器。默認狀況下，指示器會一直顯示，直到觸發`.hide()`。

object

loading指示器的選項。可用屬性：html

{string=} template 指示器的html內容。
{string=} templateUrl 一個加載html模板的url做爲指示器的內容。
{boolean=} noBackdrop 是否隱藏背景。默認狀況下它會顯示。
{number=} delay 指示器延遲多少毫秒顯示。默認爲不延遲。
{number=} duration 等待多少毫秒後自動隱藏指示器。默認狀況下，指示器會一直顯示，直到觸發.hide()。

隱藏一個加載效果。android

hide()

API

屬性	類型	詳情
delegate-handle (可選)	`字符串`	該句柄定義帶有`$ionicListDelegate`的列表。ios
show-delete (可選)	`布爾值`	列表項的刪除按鈕當前是顯示仍是隱藏。app
show-reorder (可選)	`布爾值`	列表項的排序按鈕當前是顯示仍是隱藏。ionic
can-swipe (可選)	`布爾值`	列表項是否被容許滑動顯示選項按鈕。默認：true。ide

實例

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.runoob.com/static/ionic/css/ionic.min.css" rel="stylesheet">
    <script src="http://www.runoob.com/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

設置加載的默認選項:svg

用法:

var app = angular.module('myApp', ['ionic'])
app.constant('$ionicLoadingConfig', {
  template: '默認加載模板……'
});
app.controller('AppCtrl', function($scope, $ionicLoading) {
  $scope.showLoading = function() {
    $ionicLoading.show(); //配置選項在 $ionicLoadingConfig 設置
  };
});

ion-spinner

ionSpinner 提供了許多種旋轉加載的動畫圖標。當你的界面加載時，你就能夠呈現給用戶相應的加載圖標。動畫

該圖標採用的是SVG。

用法

<ion-spinner icon="spiral"></ion-spinner>    //默認用法

像大部分其餘的ionic組件同樣，spinner也可使用ionic的標準顏色命名規則，就像下面這樣：

<ion-spinner class="spinner-energized"></ion-spinner>

實例

HTML 代碼

<ion-content scroll="false" class="has-header">
  <p>
    <ion-spinner icon="android"></ion-spinner>
    <ion-spinner icon="ios"></ion-spinner>
    <ion-spinner icon="ios-small"></ion-spinner>
    <ion-spinner icon="bubbles" class="spinner-balanced"></ion-spinner>
    <ion-spinner icon="circles" class="spinner-energized"></ion-spinner>
  </p>

  <p>
    <ion-spinner icon="crescent" class="spinner-royal"></ion-spinner>

    <ion-spinner icon="dots" class="spinner-dark"></ion-spinner>
    <ion-spinner icon="lines" class="spinner-calm"></ion-spinner>
    <ion-spinner icon="ripple" class="spinner-assertive"></ion-spinner>
    <ion-spinner icon="spiral"></ion-spinner>
  </p>


</ion-content>

CSS 代碼

body {
  cursor: url('http://www.runob.com/try/demo_source/finger.png'), auto;
}    
p {
  text-align: center;
  margin-bottom: 40px !important;
}
.spinner svg {
  width: 19% !important;
  height: 85px !important;
}

JavaScript 代碼

angular.module('ionicApp', ['ionic'])

.controller('MyCtrl', function($scope) { 
  
});

在線嘗試一下效果

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。