UICircleSlider

概述

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

是否仍需要帮助? 请保持联络!
最后更新于 2023/05/12