ionic 教程
1. ionic 教程 2. ionic 安装 3. ionic 创建 APP 4. ionic 头部与底部 5. ionic 按钮 6. ionic 列表 7. ionic 卡片 8. ionic 表单和输入框 9. ionic toggle(切换开关) 10. ionic checkbox 11. ionic 单选框 12. ionic range 13. ionic select 14. ionic tab(选项卡) 15. ionic 网格(Grid) 16. ionic 颜色 17. ionic 上拉菜单(ActionSheet) 18. ionic 背景层 19. ionic 下拉刷新 20. ionic 复选框 21. ionic 单选框操作 22. ionic 切换开关操作 23. ionic 手势事件 24. ionic 头部和底部 25. ionic 列表操作 26. ionic 加载动作 27. ionic 模态窗口 28. ionic 导航 29. ionic 平台 30. ionic 浮动框 31. ionic 对话框 32. ionic 滚动条 33. ionic 侧栏菜单 34. ionic 滑动框 35. ionic 加载动画 36. ionic 选项卡栏操作

ionic 加载动作

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)

参数 类型 详情
opts object

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

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

隐藏一个加载效果。


hide()

API

属性 类型 详情
delegate-handle
(可选)
字符串

该句柄定义带有$ionicListDelegate的列表。

show-delete
(可选)
布尔值

列表项的删除按钮当前是显示还是隐藏。

show-reorder
(可选)
布尔值

列表项的排序按钮当前是显示还是隐藏。

can-swipe
(可选)
布尔值

列表项是否被允许滑动显示选项按钮。默认:true。


实例

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.55mianshi.com/static/ionic/css/ionic.min.css" rel="stylesheet">

    <script src="http://www.55mianshi.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

设置加载的默认选项:

用法:


var app = angular.module('myApp', ['ionic'])

app.constant('$ionicLoadingConfig', {

  template: '默认加载模板……'

});

app.controller('AppCtrl', function($scope, $ionicLoading) {

  $scope.showLoading = function() {

    $ionicLoading.show(); //配置选项在 $ionicLoadingConfig 设置

  };

});