Ionic - JavaScript 加载

离子加载将在显示时禁用与用户的任何交互，并在需要时再次启用。

使用加载

加载是在控制器内部触发的。首先，我们需要在控制器中注入$ionicLoading作为依赖项。之后，我们需要调用$ionicLoading.show()方法，加载就会出现。为了禁用它，有一个$ionicLoading.hide()方法。

控制器

.controller('myCtrl', function($scope, $ionicLoading) {
   $scope.showLoading = function() {
      $ionicLoading.show({
         template: 'Loading...'
      });
   };

   $scope.hideLoading = function(){
      $ionicLoading.hide();
   };
});

HTML 代码

<button class = "button button-block" ng-click = "showLoading()"></button>

当用户点击按钮时，将出现加载。在完成一些耗时的功能后，您通常会希望隐藏加载。

离子负载展示

加载时可以使用一些其他选项参数。解释如下表所示。

加载选项参数

选项 类型 细节
模板网址 细绳 用于加载 HTML 模板作为加载指示器。
范围 目的 用于将自定义范围传递给加载。默认为 $rootScope。
无背景 布尔值 用于隐藏背景。
状态改变时隐藏 布尔值 用于在状态更改时隐藏加载。
延迟 数字 用于延迟显示指示器（以毫秒为单位）。
期间 数字 用于在一段时间（以毫秒为单位）后隐藏指示器。可以用来代替hide()方法。

加载配置

Ionic 配置用于配置您想要在整个应用程序的所有$ionicLoading服务中使用的选项。

这可以通过使用$ionicLoadingConfig来完成。由于常量应添加到主应用程序模块中，因此打开app.js文件并在模块声明后添加常量。

.constant('$ionicLoadingConfig', {
   template: 'Default Loading Template...'
})

上面的代码将产生以下屏幕 -

离子负载常数