circleProgress

open close setProgress show hide

概述

circleProgress是一个圆形进度条，开发者可以自定义圆形大小、位置、背景颜色，进度条颜色、进度条宽度，未完成进度条颜色、未完成进度条宽度，标题内容与距离圆心位置、标题颜色与动画和动画时长。

open

显示圆形进度条窗口

open(params)

params

progress:

  • 类型：数字类型
  • 描述：进度值，满进度值为100

animationTime:

  • 类型：数字类型
  • 描述：(可选项）进度条动画时长，不传或传0既是无动画
  • 默认值：0

size:

  • 类型：JSON对象
  • 描述：(可选项）进度条圆心位置坐标及圆半径
{
      x: 100,    //（可选项）数字类型；圆心 x 坐标（相对于所属的 Window 或 Frame）；默认值：100
      y: 100,    //（可选项）数字类型；圆心 y 坐标（相对于所属的 Window 或 Frame）；默认值：100
      radius:10  // (可选项) 数字类型；圆形半径；默认：100
}

styles:

  • 类型：JSON对象
  • 描述：(可选项）插件样式配置
{
      bg:'#ffffff'                //(可选项) 字符串类型；圆形背景设置，可以设置颜色或背景图片，颜色支持支持rgb、rgba、#、图片支持支持fs,widget；默认 '#ffffff'
      circle:{                    //（可选项）JSON对象；进度环样式配置
          activeBg:'#FFA500',     //(可选项) 圆形背景颜色，支持支持rgb、rgba、#；默认 '#FFA500'
          activeWidth:10,         //(可选项) 进度条宽度；默认：10
          normalBg:'#D3D3D3',     //(可选项) 未走过进度条颜色，支持支持rgb、rgba、#；默认 '#D3D3D3'
          normalWidth:5           //(可选项) 未走过进度条宽度；默认:5
      }
}

title:

  • 类型：JSON对象
  • 描述：插件标题内容与样式配置
{
     content:'标题',      //(可选项) 字符串类型；圆形进度条标题
     distance:20 ,       //(可选项) 数字类型；标题下边缘与距圆心距；默认：20
     color:'#000000',    //(可选项) 字符串类型；标题颜色，支持支持rgb、rgba、#；默认 '#000000'
     size:12             //(可选项) 数字类型；条标题字体大小；默认：12
}

subtitle:

  • 类型：JSON对象
  • 描述：子标题内容与样式配置
{
      content:'子标题',    //(可选项) 字符串类型；子标题
      distance:20 ,       //(可选项) 数字类型；子标题上边缘距圆心距；默认：20
      color:'#000000',    //(可选项) 字符串类型；子标题颜色，支持rgb、rgba、#；默认 '#000000'
      size:14             //(可选项) 数字类型；子标题字体大小；默认 14
}

fixedOn：

  • 类型：字符串类型
  • 描述：（可选项）插件视图添加到指定 frame 的名字（只指 frame，传 window 无效）
  • 默认：插件依附于当前 window

fixed:

  • 类型：布尔
  • 描述：（可选项）插件是否随所属 window 或 frame 滚动
  • 默认值：true（不随之滚动）

callback(ret)

ret:

  • 类型：JSON对象
  • 描述：点击的事件类型；
  • 内部字段：
{
     id:0  //数字类型；打开的环形进度条插件的id
}

示例代码

var circleProgress = api.require('circleProgress');
var params = {
        progress:60,
        animationTime:1,
        size:{
            x:200,
            y:150,
            radius:100              //(可选项) 圆形半径；默认：100
        },
        styles:{
            
            bg:'#ffffff',           //(可选项) 圆形背景设置，可以设置颜色或背景图片，颜色支持rgb、rgba、#，图片支持fs,widget；默认 '#ffffff'
        circle:{
            activeBg:'#FFA500',     //(可选项) 圆形背景颜色，支持支持rgb、rgba、#；默认 '#FFA500'
            activeWidth:10,         //(可选项) 进度条宽度；默认：10
            normalBg:'#D3D3D3',     //(可选项) 未走过进度条颜色，支持支持rgb、rgba、#；默认 '#D3D3D3'
            normalWidth:5           //(可选项) 未走过进度条宽度；默认:5
        }
        },
        title: {
            content:'标题',        //(可选项) 字符串类型；圆形进度条标题
            distance:20 ,         //(可选项) 数字类型；标题下边缘与距圆心距；默认：20
            color:'#000000',      //(可选项) 字符串类型；标题颜色，支持支持rgb、rgba、#；默认 '#000000'
            size:12               //(可选项) 数字类型；条标题字体大小；默认：12
        },
        
        subtitle:{
            
            content:'子标题',    //(可选项) 字符串类型；子标题
            distance:20 ,       //(可选项) 数字类型；子标题上边缘距圆心距；默认：20
            color:'#000000',    //(可选项) 字符串类型；子标题颜色，支持rgb、rgba、#；默认 '#000000'
            size:14             //(可选项) 数字类型；子标题字体大小；默认 14
            
        },
        fixedOn: api.frameName
};
circleProgress.open(params, function(ret) {
    alert(ret.id);
});

可用性

iOS系统，android系统

可提供的1.0.0及更高版本

close

关闭圆形进度条窗口

close(params);

params

id:

  • 类型：数字类型
  • 描述：圆形进度条id

示例代码

var circleProgress = api.require('circleProgress');
circleProgress.close({
    id:0
});

可用性

iOS系统，android系统

可提供的1.0.0及更高版本

setProgress

设置进度条进度。

setProgress(params)

params

id:

  • 类型：数字类型
  • 描述：圆形进度条id

progress:

  • 类型：数字类型
  • 描述：（可选项）进度值，满进度值为100。若不传则显示当前进度

content:

  • 类型： 字符串类型
  • 描述：（可选项）圆心进度条标题。若不传则显示当前标题

subcontent:

  • 类型： 字符串类型类型
  • 描述：（可选项）圆心进度条子标题。若不传则显示当前子标题

示例代码

var circleProgress = api.require('circleProgress');
var params = {
       id:1,
       progress:90,
       content:'标题',
       subcontent:'子标题',
 }
circleProgress.setProgress(params);

可用性

iOS系统，android系统

可提供的1.0.0及更高版本

show

显示圆形进度条窗口

show(params);

params

id:

  • 类型：数字类型
  • 描述：圆形进度条id

示例代码

var circleProgress = api.require('circleProgress');
circleProgress.show({
    id:0
});

可用性

iOS系统，android系统

可提供的1.0.0及更高版本

hide

隐藏圆形进度条窗口

hide(params);

params

id:

  • 类型：数字类型
  • 描述：圆形进度条id

示例代码

var circleProgress = api.require('circleProgress');
circleProgress.hide({
    id:0
});

可用性

iOS系统，android系统

可提供的1.0.0及更高版本

是否仍需要帮助？ 请保持联络！
最后更新于 2024/04/24