目录

概述

spinner插件的功能是使应用增加显示spinner和隐藏spinner的能力。spinner一般用于程序加载、跳转等场景,美观得体的spinner会让你的应用有更好的用户体验。

JS调用方法

1、导入插件require(“cordova!cordova-plugin-spinner-dialog”)。
2、插件提供了show和hide方法,但传入不同的参数能实现不同的效果。
show方法可以传3个参数,或者不传参数。
第一个参数代表标题,第二个参数代表内容,第三个参数代表spinner是否可被取消。
对应的样式如下:
show() 没有标题和内容,只有圆圈动画
spinner1
show(null,”正在加载…”,null) spinner的内容为”正在加载…”,标题为空。
spinner2
show(“spinner标题”,”显示5秒后消失”,true),true代表不能用back键取消该spinner,取消spinner的方法参考下面贴出的js代码的setTimeout。
spinner3
show(“只有标题的spinner”,null,null) 只有标题的spinner
spinner4
show(“spinner标题”,”正在加载…”,null) 同时包含标题和内容的spinner
spinner5

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则能显示标题和内容。