JSRUN 用代码说话

加载动作

编辑教程

加载动作

$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="//www.jsrun.cn/statics/demosource/ionic.min.css" rel="stylesheet">
    <script src="//www.jsrun.cn/statics/demosource/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 设置
  };
});
JSRUN闪电教程系统是国内最先开创的教程维护系统, 所有工程师都可以参与共同维护的闪电教程,让知识的积累变得统一完整、自成体系。 大家可以一起参与进共编,让零散的知识点帮助更多的人。
X
支付宝
9.99
无法付款,请点击这里
金额: 0
备注:
转账时请填写正确的金额和备注信息,到账由人工处理,可能需要较长时间
如有疑问请联系QQ:565830900
正在生成二维码, 此过程可能需要15秒钟