UICircleSlider

立即使用

open close show hide getValue setValue setTrackColor setTintColor setThumbColor setThumbImg addEventListener

概述

UICircleSlider 封装了一个滑动器选择器，该选择器是弧形选择器。开发者可通过配置参数开发出任意弧度和方向以及位置的选择器。亦可通过相关接口动态设置选择器的样式，简单方便迅速的帮助开发者开发出UI炫酷的 App。

open

打开 UICircleSlider

open({params}, callback(ret))

params

position：

  • 类型：JSON 类型
  • 描述：（可选项）模块的位置及尺寸
  • 内部字段：
{
    centerX: 0,         //（可选项）数字类型；弧形选择器所在的圆的圆心坐标（相对于所属的 Window 或 Frame）；默认值：180
    centerY: 0,         //（可选项）数字类型；弧形选择器所在的圆的圆心坐标（相对于所属的 Window 或 Frame）；默认值：180
    radius:140,         //（可选项）数字类型；轨道半径；默认：50
    borderWidth: 15,    //（可选项）数字类型；轨道宽度；默认：15
    thumbSize:30,       //（可选项）数字类型；滑块大小；默认：30
    thumbExpandSize:50  //（可选项）数字类型；滑块被按下时放大的大小；默认：50
}

styles：

  • 类型：JSON 类型
  • 描述：（可选项）模块的样式配置
  • 注意：thumbImg 和 thumbColor 同时有值则以 thumbImg 为准;Android系统下显示的view大小为整个圆的大小，使用技巧：centerX = (radius + max(borderWidth,thumbExpandSize)) * 2，注意合理设置参数大小，避免显示异常。
  • 内部字段：
{ 
    trackColor: 0,      //（可选项）字符串类型；轨道颜色，支持rgb、rgba、#；默认值：#00FF7F
    tintColor: 0,       //（可选项）字符串类型；进度颜色，支持rgb、rgba、#；默认值：#8B008B 
    thumbColor: 0,      //（可选项）字符串类型；滑块颜色，支持rgb、rgba、#；默认值：#4B0082
    thumbImg: ''        //（可选项）字符串类型；滑块图片路径，要求本地路径（fs://、widget://）；默认值：无
}

anticlockwise：

  • 类型：布尔
  • 描述：（可选项）是否为逆时针 注意：Android 系统暂不支持设置逆时针方向
  • 默认：false

anchorLowestPoint：

  • 类型：布尔
  • 描述：（可选项）铆点（起点、对照点）是否为最低点（六点钟位置），否则为最高点（十二点钟位置）
  • 默认：true

startAngle：

  • 类型：数字类型
  • 描述：（可选项）弧形选择器起点针对铆点的角度，配合
  • 默认：90
  • 注意：startAngle+duringAngle 不可大于 360

duringAngle：

  • 类型：数字类型
  • 描述：（可选项）弧形选择器大小（起点到终点的角度）
  • 默认：180
  • 取值范围：30-360
  • 注意：startAngle+duringAngle 不可大于 360

value：

  • 类型：数字类型
  • 描述：（可选项）开始时的默认值
  • 默认：0
  • 取值范围：0-1

fixedOn：

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

callback(ret, err)

ret：

  • 类型：JSON 对象
  • 内部字段：
{
    status:       //布尔类型；是否打开成功
}

示例代码

var UICircleSlider = api.require('UICircleSlider');
UICircleSlider.open({
    anticlockwise: false,
    anchorLowestPoint: true,
    position: {
        centerX: 160,
        centerY: 160,
        borderWidth: 15,
        thumbSize: 30,
        thumbExpandSize: 50,
        radius: 140
    },
    styles: {
        trackColor: '#00FF7F',
        tintColor: '#8B008B',
        thumbColor: '#4B0082',
        thumbImg: 'widget://res/slider/a1.png'
    },
    value: 0.2,
    fixedOn: api.frameName,
    fixed: true
}, function(ret) {
    api.alert({msg:JSON.stringify(ret)});
});

可用性

iOS 系统，Android 系统

可提供的 1.0.0 及更高版本

close

关闭模块

close()

示例代码

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

可用性

iOS 系统，Android 系统

可提供的 1.0.0 及更高版本

show

显示模块

show()

示例代码

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

可用性

iOS 系统，Android 系统

可提供的 1.0.0 及更高版本

hide

隐藏模块

hide()

示例代码

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

可用性

iOS 系统，Android 系统

可提供的 1.0.0 及更高版本

getValue

获取 UICircleSlider 的值

getValue(callback(ret))

callback(ret

ret:

  • 类型：JSON 类型
  • 描述：返回值
  • 内部字段：
{
    value: 0    //（可选项）数字类型；当前值
}

示例代码

var UICircleSlider = api.require('UICircleSlider');
UICircleSlider.getValue(function(ret) {
    api.alert({msg:JSON.stringify(ret)});
});

可用性

iOS 系统，Android 系统

可提供的 1.0.0 及更高版本

setValue

设置 UICircleSlider 的值

setValue({params})

params

value:

  • 类型：数字
  • 描述：要设置的值，
  • 取值范围：0-1

示例代码

var UICircleSlider = api.require('UICircleSlider');
UICircleSlider.setValue({ 
    value: 0.5
});

可用性

iOS 系统，Android 系统

可提供的 1.0.0 及更高版本

setTrackColor

设置轨道的颜色

setTrackColor({params})

params

color:

  • 类型：字符串
  • 描述：要设置的颜色，支持rgb、rgba、#

示例代码

var UICircleSlider = api.require('UICircleSlider');
UICircleSlider.setTrackColor({ 
    color: '#000000'
});

可用性

iOS 系统，Android 系统

可提供的 1.0.0 及更高版本

setTintColor

设置划过的轨道的颜色

setTintColor({params})

params

color:

  • 类型：字符串
  • 描述：要设置的颜色，支持rgb、rgba、#

示例代码

var UICircleSlider = api.require('UICircleSlider');
UICircleSlider.setTintColor({ 
    color: '#000000'
});

可用性

iOS 系统，Android 系统

可提供的 1.0.0 及更高版本

setThumbColor

设置滑块的颜色

setThumbColor({params})

params

color:

  • 类型：字符串
  • 描述：要设置的颜色，支持rgb、rgba、#

示例代码

var UICircleSlider = api.require('UICircleSlider');
UICircleSlider.setThumbColor({ 
    color: '#000000'
});

可用性

iOS 系统，Android 系统

可提供的 1.0.0 及更高版本

setThumbImg

设置轨道的颜色

setThumbImg({params})

params

img:

  • 类型：字符串
  • 描述：要设置的滑块图片路径，要求本地路径（widget://、fs://）

示例代码

var UICircleSlider = api.require('UICircleSlider');
UICircleSlider.setThumbImg({ 
    img: 'widget://res/q.png'
});

可用性

iOS 系统，Android 系统

可提供的 1.0.0 及更高版本

addEventListener

打开 UICircleSlider

addEventListener({params}, callback(ret))

params

name：

  • 类型：字符串类型
  • 描述：（可选项）监听事件名称
  • 默认：touchDown
  • 取值范围：
    • touchDown：手指按下
    • touchMove：手指拖动
    • touchUp：手指抬起

callback(ret, err)

ret：

  • 类型：JSON 对象
  • 内部字段：
{
    vale: 0.5      //数字类型；模块当前值
}

示例代码

var UICircleSlider = api.require('UICircleSlider');
UICircleSlider.addEventListener({
    name: 'touchDown' 
}, function(ret) {
    api.toast({
        msg: '手指按下',
        duration: 1000,
        location: 'bottom'
    });
});

可用性

iOS 系统，Android 系统

可提供的 1.0.0 及更高版本