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

最新推荐文章于 2025-02-27 06:01:32 发布

原创最新推荐文章于 2025-02-27 06:01:32 发布 · 5.6k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#动画 #ionic-加载效果 #ionicLoad

ionic 专栏收录该内容

17 篇文章

订阅专栏

本文介绍Ionic框架中加载动画的定制方法，包括如何显示和隐藏加载效果、修改默认加载动画及实现自定义样式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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