【2016.09.07】【ionic 加载动作】

最新推荐文章于 2024-10-01 20:12:28 发布

chengji4739

最新推荐文章于 2024-10-01 20:12:28 发布

阅读量90

点赞数

文章标签： javascript ViewUI

原文链接：https://my.oschina.net/YongfengHe/blog/743450

版权

加载中

加载完成

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

  <link href="lib/ionic/css/ionic.css" rel="stylesheet">

  <script src="lib/ionic/js/ionic.bundle.js"></script>
  <script src="js/app.js"></script>

  <!-- 在使用 Cordova/PhoneGap 创建的 APP 中包含的文件，由 Cordova/PhoneGap 提供，(开发过程中显示 404) -->
  <script src="cordova.js"></script>
  <script>
    var app = angular.module("myApp",["ionic"]);
    app.run(function($ionicPlatform) {
        $ionicPlatform.ready(function() {
          // Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
          // for form inputs)
          if(window.cordova && window.cordova.plugins.Keyboard) {
            cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
          }
          if(window.StatusBar) {
            StatusBar.styleDefault();
          }
        });
      });

    app.controller("myCtrl01",["$scope","$ionicLoading","$timeout",function ($scope,$ionicLoading,$timeout) {
      $scope.datas = [
          {name:"张三"}
        ];
      $scope.getData = [{name:'李四'},{name:'王五'},{name:'赵六'},{name:'寒冰射手'}];

      $ionicLoading.show({
        content: '正在加载...',
        animation: 'fade-in,fade-out',
        showBackdrop: true,
        maxWidth: 200,
        showDelay: 0
      });
      $scope.clickLoadButton = $timeout(function () {
        $ionicLoading.hide();
        Array.prototype.push.apply($scope.datas, $scope.getData);
      },3000);
    }]);
  </script>

</head>
<body ng-app="myApp" ng-controller="myCtrl01">
  <ion-header-bar class="bar-positive">
    <h1 class="title">正在加载动画</h1>
    <button class="button" ng-click="">加载内容</button>
  </ion-header-bar>

  <ion-content class="content has-header">
    <ion-list>
      <ion-item ng-repeat="item in datas">{{item.name}}</ion-item>
    </ion-list>
  </ion-content>
</body>
</html>

转载于:https://my.oschina.net/YongfengHe/blog/743450