您的位置：首页 > 其它

IONIC----03.ionicLoading

2016-07-13 09:28 211 查看

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no,width=device-width,height=device-height">

<script src="./lib/js/ionic.bundle.min.js"></script>
<link rel="stylesheet" type="text/css" href="./lib/css/ionic.min.css">

<title>Ionic</title>
</head>

<body ng-app="myApp" ng-controller="fristController">
<ion-header-bar class="bar-positive">
<h1 class="title">$ionicLoading</h1>
<a class="button icon ion-refresh" ng-click="load();">载入</a>
</ion-header-bar>

<ion-content>
<ion-list>
<ion-item collection-repeat="item in items">{{item}}</ion-item>
</ion-list>
</ion-content>
</body>
</html>
<script>
angular.module("myApp", ["ionic"])
.controller("fristController", function($scope, $ionicLoading,$timeout) {
$scope.items = [];
var idx = 0;
$scope.load = function() {
//显示载入指示器
$ionicLoading.show({
template: "正在载入数据，请稍后..."
});

//延时2000ms来模拟载入的耗时行为
$timeout(function(){
for(var i=0;i<10;i++,idx++) $scope.items.unshift("item " + idx);
//隐藏载入指示器
$ionicLoading.hide();
},2000);
};
});
</script>

GITHUB

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： Loading ionic

相关文章推荐

新的分享

章节导航