目录
概述
spinner插件的功能是使应用增加显示spinner和隐藏spinner的能力。spinner一般用于程序加载、跳转等场景,美观得体的spinner会让你的应用有更好的用户体验。
JS调用方法
1、导入插件require(“cordova!cordova-plugin-spinner-dialog”)。
2、插件提供了show和hide方法,但传入不同的参数能实现不同的效果。
show方法可以传3个参数,或者不传参数。
第一个参数代表标题,第二个参数代表内容,第三个参数代表spinner是否可被取消。
对应的样式如下:
show() 没有标题和内容,只有圆圈动画

show(null,”正在加载…”,null) spinner的内容为”正在加载…”,标题为空。

show(“spinner标题”,”显示5秒后消失”,true),true代表不能用back键取消该spinner,取消spinner的方法参考下面贴出的js代码的setTimeout。

show(“只有标题的spinner”,null,null) 只有标题的spinner

show(“spinner标题”,”正在加载…”,null) 同时包含标题和内容的spinner

js代码
define(function(require){
var $ = require("jquery");
require("cordova!cordova-plugin-spinner-dialog");
var Model = function(){
this.callParent();
};
Model.prototype.spinneronlyClick = function(event){
window.plugins.spinnerDialog.show();
};
Model.prototype.mspinnerClick = function(event){
window.plugins.spinnerDialog.show(
null,
"正在加载...",
null
);
};
Model.prototype.persispinnerClick = function(event){
window.plugins.spinnerDialog.show(
"spinner标题",
"显示5秒后消失",
true
);
setTimeout(function() {
window.plugins.spinnerDialog.hide();
}, 5000);
};
Model.prototype.otspinnerClick = function(event){
window.plugins.spinnerDialog.show(
"只有标题的spinner",
null,
null
);
};
Model.prototype.tmspinnerClick = function(event){
window.plugins.spinnerDialog.show(
"spinner标题",
"正在加载...",
null
);
};
return Model;
});
注意事项
1、IOS取消如果spinner是可以被取消的,IOS系统点击屏幕即可取消,Android系统需要点击系统的回退键。
2、IOS只能显示一行文本信息。spinner在IOS只能显示标题,而在Android则能显示标题和内容。
评一波