waterBallProgress

来自于:开发者立即使用

概述

waterBallProgress 是一个球形+环形进度指示器,开发者可通过配置相应参数来自定义显示环形,以及球形内水波的颜色等各种样式。打开本模块时,相当于 open 一个 frame,开发者可自定义起位置、大小。

模块实现效果图如下:

图片说明

open

打开进度指示器

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

params

rect:

  • 类型:JSON 对象
  • 描述:(可选项)模块位置和大小配置,若不传则取内部字段默认值
  • 内部字段:
{
     centerX: 100,   //(可选项)数字类型:模块中心点x坐标(相对于所属的 Window 或 Frame);默认:所属 window 或 frame 的中点x坐标
     centerY: 100,   //(可选项)数字类型;模块中心点y坐标(相对于所属的 Window 或 Frame);默认:所属 window 或 frame 的中点y坐标
     radius: 120     //(可选项)数字类型;模块半径,若带最外层圆环则本半径包括圆环部分;默认:所属window或frame的宽和高度取最小值然后除以2.0
}

ball:

  • 类型:JSON 对象
  • 描述:(可选项)中间水球样式配置,若不传则取内部字段默认值
  • 内部字段:
{
     waterColor: '#90EE90',    //(可选项)字符串类型;球内水的颜色,支持rgb、rgba、#;默认:#90EE90
     backWaterColor:'#33cc99' //(可选项)字符串类型;球内后波浪水的颜色,支持rgb、rgba、#;默认:#33cc99(仅iOS可以用)
     bgColor: 'rgba(0,0,0,0)', //(可选项)字符串类型;球内背景色,支持rgb、rgba、#;默认:rgba(0,0,0,0)
     borderWidth: 0.5,         //(可选项)数字类型;球的边框粗细;默认:0.5
     borderColor: '#fff'       //(可选项)字符串类型;球边框的颜色,支持rgb、rgba、#;默认:#fff
}

annulus:

  • 类型:JSON 对象
  • 描述:(可选项)外部环形样式配置,若不传则不显示外部环形
  • 内部字段:
{
     activeColor: '#ffffff',    //(可选项)字符串类型;已加载部分的颜色,支持rgb、rgba、#;默认:#fff
     bgColor: '#F0F0F0',        //(可选项)字符串类型;未加载部分的颜色,支持rgb、rgba、#;默认:#F0F0F0
     width: 20,                //(可选项)数字类型;环的粗细;默认:20
     interval: 10,             //(可选项)数字类型;环形和球形的间隔;默认:10
}

labels:

  • 类型:数组
  • 描述:(可选项)加载指示器上的提示文字配置,若不传则不显示,本参数为一个数组,可配置显示多个提示文字
  • 内部字段:
[{
     color: '#ffffff',    //(可选项)字符串类型;提示文字的颜色,支持rgb、rgba、#;默认:#fff
     size: 14,            //(可选项)数字类型;提示文字的大小;默认:20
     text: '10%' ,        //(可选项)字符串类型;提示文字的文本内容
     offset: 0            //(可选项)数字类型;提示文字所占区域的锚点距离模块锚点的偏移量,取值范围:-radius到+radius(中间点是0,向下取正,向上取负 );默认:0
}]

progress:

  • 类型:数字
  • 描述:(可选项)当前的进度,取值范围:0-100
  • 默认:0

fixedOn:

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

fixed:

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

callback(ret, err)

ret:

  • 类型:JSON 对象
  • 内部字段:
{
    status:           //布尔类型;模块是否打开成功,true|false 如果模块已经成功打开,第二次调用open时会直接返回true.
}

示例代码

var waterBallProgress = api.require('waterBallProgress');
waterBallProgress.open({
    rect: {
         centerX: 100,   
         centerY: 100,   
         radius: 120     
    },
    ball: {
         waterColor: '#90EE90',
         backWaterColor:'#33cc99',   
         bgColor: 'rgba(0,0,0,0)',
         borderWidth: 0.5,       
         borderColor: '#fff'  
    },
    annulus: {
         activeColor: '#ffffff',    
         bgColor: '#F0F0F0',     
         width: 20,                
         interval: 10,            
         intervalColor: 'rgba(0,0,0,0)'
    },
    labels: [{
         color: '#ffffff',    
         size: 18,            
         text: 10 ,           
         offset: -50            
    }, {
         color: '#ffffff',    
         size: 30,            
         text: '50%' ,           
         offset: 0            
    }, {
         color: '#ffffff',    
         size: 18,            
         text: 10 ,           
         offset: 50            
    }],
    progress: 50,
    fixedOn: api.frameName,
    fixed: false
}, function(ret, err) {
    if(ret.status){
       alert("创建成功");
    }else{
       alert("创建失败");
    }
});

可用性

iOS系统,Android系统

可提供的1.0.0及更高版本

close

关闭模块

close()

示例代码

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

可用性

iOS系统,Android系统

可提供的1.0.0及更高版本

hide

隐藏已经打开并显示的模块,并未从内存里清除

hide()

示例代码

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

可用性

iOS系统,Android系统

可提供的1.0.0及更高版本

show

显示已隐藏的模块

show()

示例代码

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

可用性

iOS系统,Android系统

可提供的1.0.0及更高版本

setProgress

设置进度值及提示文字

setProgress({params})

params

progress:

  • 类型:数字
  • 描述:(可选项)设置的值
  • 默认值:0

labels:

  • 类型:数组
  • 描述:(可选项)加载指示器上的提示文字更新,若不传则不显示,本参数为一个数组,可配置显示多个提示文字,起顺序与 open 接口内的 labels 一一对应,若为空则保持原值不变
  • 示例:
['','67%','','6小时30分']

示例代码

var waterBallProgress = api.require('waterBallProgress');
waterBallProgress.setProgress({
    progress: 67,
    labels: ['','67%','','6小时30分']
});

可用性

iOS系统,Android系统

可提供的1.0.0及更高版本