Question

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

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

谢谢

抱歉，我的英语很差。

Answer 1

或者你可以使用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（）;隐藏它。

Answer 2

使用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。

Answer 3

您也可以使用占位符..

https://onsen.io/reference/ons-loading-placeholder.html

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

3 个答案: