ionic 加载动作$ionicLoading 和加载动画 ion-spinner

来源：互联网发布：淘宝红包在哪里领取编辑：程序博客网时间：2024/06/01 11:44

一、ion-spinner使用

ionSpinner 提供了许多种旋转加载的动画图标。当你的界面加载时，你就可以呈现给用户相应的加载图标。

该图标采用的是SVG。

<!DOCTYPE html><html><head>    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />    <title></title>    <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width">    <link href="../scripts/ionic/css/ionic.min.css" rel="stylesheet" /></head><body ng-app="myApp" ng-controller="myCtrl">    <ion-spinner icon="spiral"></ion-spinner>    <ion-spinner class="spinner-energized"></ion-spinner>    <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>    <script src="../scripts/ionic/js/ionic.bundle.min.js"></script>    <script>        var app = angular.module('myApp', ['ionic']);        app.controller('myCtrl', function ($scope, $http) {        });    </script></body></html>

二、在js中使用$ionicLoading

var app = angular.module('myApp', ['ionic']);app.controller('myCtrl', function ($scope, $http, $ionicLoading) {    $scope.show = function () {        //指定模板内容        $ionicLoading.show({            //template: '正在加载....',            template: '<ion-spinner icon="lines" class="spinner-calm"></ion-spinner>', //替换默认动画            duration: 5000   //指定显示时长，后自动隐藏        });        ////使用图标        //$ionicLoading.show({        //    content: 'Loading',        //    animation: 'fade-in',        //    showBackdrop: true,        //    maxWidth: 200,        //    showDelay: 0  //指定延迟显示        //});    }    $scope.hide = function () {        $ionicLoading.hide();    }});

默认样式

三、全局配置$ionicLoading

var app = angular.module('myApp', ['ionic']);//全局配置加载动作app.constant('$ionicLoadingConfig', {    template: '<ion-spinner icon="lines" class="spinner-calm"></ion-spinner>',    animation: 'fade-in',    //duration: 5000});app.controller('myCtrl', function ($scope, $http, $ionicLoading) {    $scope.show = function ($event) {        //显示加载        $ionicLoading.show();        $event.stopPropagation();    }    $scope.hide = function () {        //隐藏加载        $ionicLoading.hide();    }});

show(opts),方法更多参数说明：

opts object

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

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

AngularJs 自定义ajax服务为请求添加加载动画

Ionic Tab选项卡使用整理（三）

更多参考：

http://www.runoob.com/ionic/ionic-ionicloading.html

0 0