如何在onsen-ui中创建加载?

时间:2014-05-30 10:53:28

标签: onsen-ui

我在我的应用程序中使用phonegap和onsen-ui。

如何在我的应用中使用onsen创建加载?

谢谢

抱歉,我的英语很差。

3 个答案:

答案 0 :(得分:12)

或者你可以使用modal来显示这样的加载屏幕。

<ons-modal var="modal">
      <ons-icon icon="ion-load-c" spin="true"></ons-icon>
      <br><br>
      Please wait.<br>Loading...
    </ons-modal>

然后调用modal.show();在你的控制器中显示模态和modal.hide();隐藏它。

答案 1 :(得分:5)

使用ngShow或ngHide。

以下是示例代码。

<script>
    var myApp = angular.module('myApp', [ 'ngTouch', 'onsen.directives']);    

    myApp.controller('SampleCtrl', function($scope, $timeout){
        $scope.isShow = true;

        $timeout(function(){
            //If page content was loaded, set the false to $scope.isShow.
            $scope.isShow = false;
        },'2000')
    });
</script>


</head>
  <body ng-controller="SampleCtrl">

  <div ng-show="isShow">
    <!--Define your loading screen animation with HTML and CSS.-->
  </div>

</body>
</html>

您需要自己定义css动画。但是,有许多有用的工具可用于创建加载动画,如this

答案 2 :(得分:0)