UIActionProgress

来自于：官方立即使用

• Method

open setData close hide show getValue

论坛示例

为帮助用户更好更快的使用模块，论坛维护了一个示例，示例中包含示例代码、知识点讲解、注意事项等，供您参考。

概述

UIActionProgress 是一个进度条模块，调用open 接口从底部弹出一个进度条展示区域，开发者可自定义该区域的标题、提示信息、进度及其样式。详细功能参考接口列表。

open

弹出进度条展示区域

open({params}, callback(ret))

params

maskBg：

• 类型：字符串
• 描述：（可选项）遮罩层配置，若不传则无遮罩层；支持rgb、rgba、#，如rgba(0,0,0,0.4)

styles：

• 类型：JSON 对象
• 描述：（可选项）弹出进度条样式配置
• 内部字段：

{
    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：

• 类型：JSON 对象
• 描述：进度条区域的数据配置
• 内部字段：

{
    title: '正在更新...',  //字符串类型；标题内容，仅当模块有标题区域时有效
    msg: '',              //字符串类型；提示文字内容，仅当模块有提示区域时有效
    value: 1              //数字类型；进度条的值，取值范围：0-100
}

callback(ret)

ret：

• 类型：JSON 对象
• 内部字段：

{
  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

设置数据

setData({params})

params

data：

• 类型：JSON 对象
• 描述：进度条区域的数据配置
• 内部字段：

{
    title: '正在更新...',  //字符串类型；标题内容
    msg: '',              //字符串类型；提示文字内容
    value: 1              //数字类型；进度条的值，取值范围：0-100
}

示例代码

var UIActionProgress = api.require('UIActionProgress');
UIActionProgress.setData({
 data: {
     title: '正在更新...',
     msg: '说明文字文字',
     value: 10
 }
});

可用性

iOS系统，Android系统

可提供的1.0.0及更高版本

close

关闭模块

close()

示例代码

var UIActionProgress = api.require('UIActionProgress');
UIActionProgress.close();

可用性

iOS系统，Android系统

可提供的1.0.0及更高版本

hide

隐藏模块，并没有从内存里清除

hide()

示例代码

var UIActionProgress = api.require('UIActionProgress');
UIActionProgress.hide();

可用性

iOS系统，Android系统

可提供的1.0.0及更高版本

show

显示已隐藏的模块

show({params})

示例代码

var UIActionProgress = api.require('UIActionProgress');
UIActionProgress.show();

可用性

iOS系统，Android系统

可提供的1.0.0及更高版本

getValue

获取当前进度条的值

getValue(callback(ret))

callback(ret)

ret：

• 类型：JSON 对象
• 内部字段：

{
  value: 10     //数字类型；当前进度条的值             
}

示例代码

var UIActionProgress = api.require('UIActionProgress');
UIActionProgress.getValue(function(ret){
  alert(ret.value);
});

可用性

iOS系统，Android系统

可提供的1.0.0及更高版本

论坛示例

为帮助用户更好更快的使用模块，论坛维护了一个示例，示例中包含示例代码、知识点讲解、注意事项等，供您参考。