目录
概述
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则能显示标题和内容。
评一波