arcProgress

来自于:官方立即使用

论坛示例

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

概述

arcProgress是一个弧形进度条,包括环形、扇形、类月牙形三种样式,开发者可以自定义进度色和背景色。此模块动画流畅,原生实现效果炫酷,有效的解决了网页画圆会有锯齿的问题

图片说明

open

打开圆形进度条

open({params}, callback(ret, err))

params

type:

  • 类型:字符串类型
  • 默认值:annular
  • 描述:进度视图类型,取值范围进度条类型,可为空

centerX:

  • 类型:数字
  • 默认值:100
  • 描述:视图中心点坐标,可为空

centerY:

  • 类型:数字
  • 默认值:100
  • 描述:视图中心点坐标,可为空

radius:

  • 类型:数字
  • 默认值:60
  • 描述:视图圆半径,可为空

bgColor:

  • 类型:字符串
  • 默认值:#C0C0C0
  • 描述:进度背景色,可为空

pgColor:

  • 类型:字符串
  • 默认值:#2e8b57
  • 描述:进度色,可为空

loopWidth:

  • 类型:数字
  • 默认值:3
  • 描述:当类型为环形进度条时,此参数表上环的宽度。若为其它类型,则此参数无用可为空

fixedOn:

  • 类型:字符串类型
  • 描述:(可选项)模块视图添加到指定 frame 的名字(只指 frame,传 window 无效)
  • 默认:模块依附于当前 window

fixed:

  • 类型:布尔
  • 默认值:true
  • 描述:是否将模块视图固定到窗口上,不跟随窗口上下滚动,可为空

callback(ret, err)

ret:

  • 类型:JSON 对象

内部字段:

{
    id:           //打开圆形进度条的id
}

示例代码

var arcProgress = api.require('arcProgress');
arcProgress.open({
    type: 1,
    centerX: api.frameWidth / 6 * (2 * 1 + 1),
    centerY: api.frameHeight / 2,
    radius: api.frameWidth / 6,
    bgColor: '#87c0ed',
    pgColor: '#325570',
    fixedOn: api.frameName
}, function(ret, err) {
    setValue({
        id: ret.id,
        value: 0
    })
});

function setValue(obj) {
    if (obj.value == 100) {
        obj.value = 0;
    }
    setTimeout(function() {
        arcProgress.setValue({
            id: obj.id,
            value: ++obj.value
        });
        setValue(obj)
    }, 100);
}

补充说明

打开圆形进度视图

可用性

iOS系统,Android系统

可提供的1.0.0及更高版本

close

关闭圆形进度视图

close({params})

params

id:

  • 类型:数字
  • 默认值:无
  • 描述:要关闭的视图的id,若为空,则关闭全部

示例代码

var arcProgress = api.require('arcProgress');
arcProgress.close({
    id: 1
});

补充说明

关闭视图

可用性

iOS系统,Android系统

可提供的1.0.0及更高版本

setValue

设置进度值

setValue({params})

params

id:

  • 类型:数字
  • 默认值:无
  • 描述:要设置视图的id,不可为空

value:

  • 类型:数字
  • 默认值:0
  • 描述:设置的值,可为空

示例代码

var arcProgress = api.require('arcProgress');
arcProgress.setValue({
    id: 1,
    value: 50
});

补充说明

设置指定id的视图的进度值

可用性

iOS系统,Android系统

可提供的1.0.0及更高版本

进度条类型

进度条类型,字符串类型

取值范围:

  • annular //环形
  • sector //扇形
  • crescent //月牙形

论坛示例

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