IONIC----03.ionicLoading

来源：互联网发布：李炎恢php第一季讲义编辑：程序博客网时间：2024/06/07 16:26
<!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
0 0