ionic笔记——$ionicLoading加载及加载动画的变更

来源：互联网发布：c罗官方数据编辑：程序博客网时间：2024/06/16 05:22

一般查到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)

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

隐藏一个加载效果。
hide()

delegate-handle (可选) 字符串该句柄定义带有$ionicListDelegate的列表。
show-delete (可选) 布尔值列表项的删除按钮当前是显示还是隐藏。
show-reorder (可选) 布尔值列表项的排序按钮当前是显示还是隐藏。
can-swipe (可选) 布尔值列表项是否被允许滑动显示选项按钮。默认：true。

默认的加载动画如图所示：
这里写图片描述
想要改变默认的加载动画，API给出的加载动画有一下几种：

<ion-spinner icon="android"></ion-spinner><ion-spinner icon="ios" class="spinner-light"></ion-spinner><ion-spinner icon="ios-small" class="spinner-dark"></ion-spinner><ion-spinner icon="bubbles" class="spinner-stable"></ion-spinner><ion-spinner icon="circles" class="spinner-positive"></ion-spinner><ion-spinner icon="crescent" class="spinner-royal"></ion-spinner><ion-spinner icon="dots" class="spinner-calm"></ion-spinner><ion-spinner icon="lines" class="spinner-balanced"></ion-spinner><ion-spinner icon="ripple" class="spinner-assertive"></ion-spinner><ion-spinner icon="spiral" class="spinner-energized"></ion-spinner>

效果如图：
这里写图片描述
如何替换掉默认的加载动画？操作如下：
html：

<body ng-app="myApp">    <ion-content ng-controller="Ctrl"></ion-content></body>

css：

.item-myicon{    margin: 0;    padding: 0;    font-size: 18px;}.item-myicon ion-spinner {    float: left;    margin: 0;    margin-right: .5em;    margin-top: -0.2em;}       .spinner svg {    width: 30px;    fill: #fff;}

js：

angular.module('myApp', ['ionic'])    .controller('Ctrl',function($scope, $ionicLoading, $timeout){        $ionicLoading.show({        noBackdrop: true,        template: '<p class="item-myicon"><ion-spinner icon="circles" class="spinner-balanced"></ion-spinner><span>加载中···</span></p>'        });    });

改变后的效果如图所示：
这里写图片描述
想要改为其他的，可以根据上面的加载动画的样式进行相应的修改！

0 0