UIActionProgress

论坛示例

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

概述

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及更高版本

论坛示例

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

是否仍需要帮助? 请保持联络!
最后更新于 2024/07/22