为帮助用户更好更快的使用插件,论坛维护了一个示例,示例中包含示例代码、知识点讲解、注意事项等,供您参考。
UIActionProgress 是一个进度条插件,调用open 接口从底部弹出一个进度条展示区域,开发者可自定义该区域的标题、提示信息、进度及其样式。详细功能参考接口列表。
弹出进度条展示区域
open({params}, callback(ret))
maskBg:
styles:
{
h: 108, //(可选项)数字类型;弹出的展示区域高度;默认:108
bg: '#fff', //(可选项)字符串类型;展示区域的背景设置,支持rgb、rgba、#;默认:#fff
border: { //(可选项)JSON 对象;标题样式配置,若不传则不显示标题区域
size: 2 //(可选项)数字类型;边界线的粗细;默认:2
color: '#4876FF',//(可选项)字符串类型;边界线颜色;默认:#4876FF
},
title: { //(可选项)JSON 对象;标题样式配置,若不传则不显示标题区域
size: 13 //(可选项)数字类型;标题文字大小;默认:13
color: '#000', //(可选项)字符串类型;标题文字颜色;默认:#000
marginT: 10 //(可选项)数字类型;标题文字顶边距插件顶边的距离;默认:10
},
msg: { //(可选项)JSON 对象;提示内容样式配置,若不传则不显示提示内容区域
size: 12 //(可选项)数字类型;提示内容文字大小;默认:12
color: '#000', //(可选项)字符串类型;提示内容文字颜色;默认:#000
marginT: 5 //(可选项)数字类型;提示文字顶边距标题底边的距离;默认:5
},
lable: { //(可选项)JSON 对象;进度标注样式配置 ,若不传则不显示进度标注
size: 12 //(可选项)数字类型;进度标注文字大小;默认:12
color: '#696969', //(可选项)字符串类型;进度标注文字颜色;默认:#696969
marginB: 5 //(可选项)数字类型;进度标注文字进度条的距离;默认:5
},
progressBar: { //(可选项)JSON 对象;进度条样式配置
size: 2 //(可选项)数字类型;进度条粗细;默认:2
normal: '#000', //(可选项)字符串类型;进度条底层颜色;默认:#696969
active: '4876FF', //(可选项)字符串类型;进度条划过区域的颜色;默认:#4876FF
marginB: 35, //(可选项)数字类型;进度条距插件底部的距离;默认:35
margin: 5 //(可选项)数字类型;进度条两头分别距两端的距离;默认:5
}
}
data:
{
title: '正在更新...', //字符串类型;标题内容,仅当插件有标题区域时有效
msg: '', //字符串类型;提示文字内容,仅当插件有提示区域时有效
value: 1 //数字类型;进度条的值,取值范围:0-100
}
ret:
{
eventType: 'show', //字符串类型;交互事件类型
//取值范围:
//show(打开插件成功)
//click(点击遮罩层事件,仅当 maskBg 有值时有效)
//complete(value值到100%时的事件)
}
var UIActionProgress = api.require('UIActionProgress');
UIActionProgress.open({
maskBg: 'rgba(0,0,0,0.5)',
styles: {
h: 108,
bg: '#fff',
title: {
size: 13,
color: '#000',
marginT: 10
},
msg: {
size: 12,
color: '#000',
marginT: 5
},
lable: {
size: 12,
color: '#696969',
marginB: 5
},
progressBar: {
size: 2,
normal: '#000',
active: '#4876FF',
marginB: 35,
margin: 5
}
},
data: {
title: '正在更新',
msg: '说明',
value: 0
}
},function(ret){
api.alert({msg:JSON.stringify(ret)});
});
iOS系统,Android系统
可提供的1.0.0及更高版本
设置数据
setData({params})
data:
{
title: '正在更新...', //字符串类型;标题内容
msg: '', //字符串类型;提示文字内容
value: 1 //数字类型;进度条的值,取值范围:0-100
}
var UIActionProgress = api.require('UIActionProgress');
UIActionProgress.setData({
data: {
title: '正在更新...',
msg: '说明文字文字',
value: 10
}
});
iOS系统,Android系统
可提供的1.0.0及更高版本
关闭插件
close()
var UIActionProgress = api.require('UIActionProgress');
UIActionProgress.close();
iOS系统,Android系统
可提供的1.0.0及更高版本
隐藏插件,并没有从内存里清除
hide()
var UIActionProgress = api.require('UIActionProgress');
UIActionProgress.hide();
iOS系统,Android系统
可提供的1.0.0及更高版本
显示已隐藏的插件
show({params})
var UIActionProgress = api.require('UIActionProgress');
UIActionProgress.show();
iOS系统,Android系统
可提供的1.0.0及更高版本
获取当前进度条的值
getValue(callback(ret))
ret:
{
value: 10 //数字类型;当前进度条的值
}
var UIActionProgress = api.require('UIActionProgress');
UIActionProgress.getValue(function(ret){
alert(ret.value);
});
iOS系统,Android系统
可提供的1.0.0及更高版本
为帮助用户更好更快的使用插件,论坛维护了一个示例,示例中包含示例代码、知识点讲解、注意事项等,供您参考。