ionic 加载动作
作者:慢热型
时间:2026-08-11
浏览:0
$ionicLoading 是 Ionic 自带的一种加载态交互效果,不是只能用默认样式,里面展示的内容同样支持在模板中按需调整。 用法 angular.module('LoadingApp', ['ionic']) .controller('LoadingCtrl', function($scop
$ionicLoading 是 Ionic 自带的一种加载态交互效果,不是只能用默认样式,里面展示的内容同样支持在模板中按需调整。

用法
angular.module('LoadingApp', ['ionic'])
.controller('LoadingCtrl', function($scope, $ionicLoading) {
$scope.show = function() {
$ionicLoading.show({
template: 'Loading...'
});
};
$scope.hide = function(){
$ionicLoading.hide();
};
});
方法
显示一个加载效果。
show(opts)
| 参数 | 类型 | 详情 |
|---|---|---|
| opts |
object
|
loading指示器的选项。可用属性:
|
隐藏一个加载效果。
hide()
API
| 属性 | 类型 | 详情 |
|---|---|---|
| delegate-handle (可选) |
字符串
|
这里说的这个句柄,指的就是那个通过 |
| show-delete (可选) |
布尔值
|
列表项的删除按钮当前是显示还是隐藏。 |
| show-reorder (可选) |
布尔值
|
列表项的排序按钮当前是显示还是隐藏。 |
| can-swipe (可选) |
布尔值
|
列表项是否被允许滑动显示选项按钮。默认:true。 |
实例
HTML 代码:
Ionic Modal
The Stooges
{{stooge.name}}
Ja vaScript 代码
angular.module('ionicApp', ['ionic'])
.controller('AppCtrl', function($scope, $timeout, $ionicLoading) {
// Setup the loader
$ionicLoading.show({
content: 'Loading',
animation: 'fade-in',
showBackdrop: true,
maxWidth: 200,
showDelay: 0
});
// Set a timeout to clear loader, however you would actually call the $ionicLoading.hide(); method whenever everything is ready or loaded.
$timeout(function () {
$ionicLoading.hide();
$scope.stooges = [{name: 'Moe'}, {name: 'Larry'}, {name: 'Curly'}];
}, 2000);
});
$ionicLoadingConfig
设置加载的默认选项:
用法:
var app = angular.module('myApp', ['ionic'])
app.constant('$ionicLoadingConfig', {
template: '默认加载模板……'
});
app.controller('AppCtrl', function($scope, $ionicLoading) {
$scope.showLoading = function() {
$ionicLoading.show(); //配置选项在 $ionicLoadingConfig 设置
};
});
作者最新文章
CPU硅脂涂抹方法图解及正确操作步骤
2026-09-22 15:23
网易2026年Q2财报:营收301亿元,游戏收入增10%,三款重点新游披露进展
2026-09-08 17:51
PDF怎么添加页码?页码位置和起始页怎么设置?
2026-09-03 09:11
图片文件怎么转换成PDF?多张图片如何按顺序合成?
2026-09-02 19:33
CorelDRAW绘制正弦曲线的两种方法:贝塞尔工具与变形工具
2026-09-02 16:08
热门文章
更多
精品专题
更多
Mac软件
更多
WINDOWS
更多


































