slider

来自于:官方

open setValue lock close show hide

概述

slider 封装了一个滑动器,开发者可自定义最大值、最小值、当前值以及拖动滑块时的气泡提示信息等各种滑动器用到的功能。原生代码比前端实现更加流畅稳定。本模块已停止更新,建议使用 UISlider

图片说明

open

打开slider

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

params

multiOpen:

  • 类型:布尔
  • 默认值:false
  • 描述:(可选项)同一个页面是否可以同时打开多个滑动器

showBubble:

  • 类型:布尔
  • 默认值:true
  • 描述:(可选项)是否显示提示气泡

alwaysShowBubble:

  • 类型:布尔
  • 默认值:true
  • 描述:(可选项)是否一直显示提示气泡,若为false则只有点击拖动时才显示气泡

x:

  • 类型:数字
  • 默认值:30
  • 描述:(可选项)slider左边点的坐标,在 Android 平台上需适当预留出滑块空隙

y:

  • 类型:数字
  • 默认值:104
  • 描述:(可选项)slider左边点的坐标,在 Android 平台上需适当预留出滑块空隙

w:

  • 类型:数字
  • 默认值:260
  • 描述:(可选项)slider的宽,在 Android 平台上需适当预留出滑块空隙

h:

  • 类型:数字
  • 默认值:5
  • 描述:(可选项)slider的高,在 Android 平台上需适当预留出滑块空隙

bgImg:

  • 类型:字符串
  • 默认值:无
  • 描述:slider的背景图片

selectedBgImg:

  • 类型:字符串
  • 默认值:无
  • 描述:slider滑块左边划过的区域图片

bar:

  • 类型:JSON 对象
  • 默认值:见内部字段
  • 描述:(可选项)滑块设置
  • 备注:若不传则不显示滑块
  • 内部字段:
  1. {
  2. barWidth //(可选项)滑块宽,数字,默认30
  3. barHeight //(可选项)滑块的高,数字,默认18
  4. barImg //(可选项)滑块背景,字符串,默认#4f94dc,支持 rgb,rgba,#,img
  5. }

bubble:

  • 类型:JSON 对象
  • 默认值:无
  • 描述:(可选项)气泡设置
  • 内部字段:
  1. {
  2. bubbleWidth //(可选项)数字类型,默认60,气泡的宽
  3. bubbleHeight //(可选项)数字类型,默认40,气泡的高
  4. bubbleImg //(可选项)字符串,默认#5cacee,气泡背景,支持 rgb,rgba,#,img
  5. titleSuffix //(可选项)字符串,默认℃,气泡后缀
  6. titleColor //(可选项)字符串,默认#000000,支持 rgb,rgba,#
  7. titleSize //(可选项)数字类型,默认13.0,气泡上字体大小
  8. titlePosition//(可选项)字符串类型,气泡标题位置,取值范围:left、right、center,默认center
  9. }

minValue:

  • 类型:数字
  • 默认值:0
  • 描述:(可选项)slider最小值

maxValue:

  • 类型:数字
  • 默认值:100
  • 描述:(可选项)slider最大值

defValue:

  • 类型:数字
  • 默认值:0
  • 描述:(可选项)slider开启默认值

fixedOn:

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

step:

  • 类型:数字
  • 默认值:0.00001
  • 描述:(可选项)滑块滑动最小单位

fixed:

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

callback(ret, err)

ret:

  • 类型:JSON 对象内部字段:
  1. {
  2. id: //滑动器的id
  3. touchCancel: //是否是滑动结束事件
  4. value: //滑动时返回滑动的值
  5. }

示例代码

  1. var slider = api.require('slider');
  2. slider.open({
  3. multiOpen : false,
  4. showBubble : true,
  5. alwaysShowBubble : false,
  6. x : 30,
  7. y : 200,
  8. w : api.frameWidth - 60,
  9. h : 10,
  10. bgImg : 'widget://image/slidebg.jpg',
  11. selectedBgImg : 'widget://image/slide2.jpg',
  12. bar : {
  13. barWidth : 30, //(可选项)滑块宽,数字,默认30
  14. barHeight : 18, //(可选项)滑块的高,数字,默认18
  15. barImg : "#ff0000"//(可选项)滑块背景,字符串,默认#4f94dc,支持 rgb,rgba,#,img
  16. },
  17. bubble : {
  18. bubbleWidth : 60, //(可选项)数字类型,默认60,气泡的宽
  19. bubbleHeight : 40, //(可选项)数字类型,默认40,气泡的高
  20. bubbleImg : "#ff00ff", //(可选项)字符串,默认#5cacee,气泡背景,支持 rgb,rgba,#,img
  21. titleSuffix : "$", //(可选项)字符串,默认℃,气泡后缀
  22. titleColor : "#0000ff", //(可选项)字符串,默认#000000,支持 rgb,rgba,#
  23. titleSize : 14, //(可选项)数字类型,默认13.0,气泡上字体大小
  24. titlePosition : "left" //(可选项)字符串类型,气泡标题位置,取值范围:left、right、center,默认center
  25. },
  26. minValue : 0,
  27. maxValue : 100,
  28. defValue : 30,
  29. step : 10,
  30. fixedOn : api.frameName,
  31. fixed:false
  32. }, function(ret, err) {
  33. if (ret) {
  34. alert(JSON.stringify(ret));
  35. } else {
  36. alert(JSON.stringify(err));
  37. }
  38. });

补充说明

可用性

iOS系统,Android系统

可提供的1.0.0及更高版本

setValue

设置slider的值

setValue({params})

params

id:

  • 类型:数字
  • 默认值:打开的第一个菜单的id
  • 描述:(可选项)菜单id
  • 备注:若 open 接口内 multiOpen 不传或传 false,则本参数被忽略

value:

  • 类型:数字
  • 默认值:无
  • 描述:要设置的滑块的值(在最大值和最小值直接的一个值)

minValue:

  • 类型:数字
  • 默认值:旧值
  • 描述:(可选项)slider 最小值

maxValue:

  • 类型:数字
  • 默认值:旧值
  • 描述:(可选项)slider 最大值

step:

  • 类型:数字
  • 默认值:0.00001
  • 描述:(可选项)滑块滑动最小单位

示例代码

  1. var slider = api.require('slider');
  2. slider.setValue({
  3. id: 1,
  4. value: 51
  5. });

补充说明

可用性

iOS系统,Android系统

可提供的1.0.0及更高版本

lock

锁定slider的值

lock({params})

params

id:

  • 类型:数字
  • 默认值:无
  • 描述:操作菜单 id
  • 备注:若 open 接口内 multiOpen 不传或传 false,则本参数被忽略

lock:

  • 类型:布尔
  • 默认值:true
  • 描述:(可选项)是否锁定当前 slider 的值

示例代码

  1. var slider = api.require('slider');
  2. slider.lock({
  3. id: 1,
  4. lock: true
  5. });

补充说明

可用性

iOS系统,Android系统

可提供的1.0.0及更高版本

close

关闭slider

close()

params

id:

  • 类型:数字
  • 默认值:无
  • 描述:(可选项)操作菜单id
  • 备注:若open接口内multiOpen不传或传false,则本参数被忽略

callback(ret, err)

ret:

  • 类型:JSON 对象
  • 内部字段:
  1. {
  2. status: //操作状态值,布尔值
  3. }

err:

  • 类型:JSON 对象
  • 内部字段:
  1. {
  2. msg: //错误信息,字符串
  3. }

示例代码

  1. var slider = api.require('slider');
  2. slider.close({
  3. id: 1
  4. });

补充说明

可用性

iOS系统,Android系统

可提供的1.0.0及更高版本

show

显示滑动器

show(callback(ret, err))

params

id:

  • 类型:数字
  • 默认值:无
  • 描述:操作菜单id
  • 备注:若open接口内multiOpen不传或传false,则本参数被忽略

callback(ret, err)

ret:

  • 类型:JSON 对象
  • 内部字段:
  1. {
  2. status:true //操作成功状态值,布尔值
  3. }

err:

  • 类型:JSON 对象
  • 内部字段:
  1. {
  2. msg: '' //错误描述,字符串
  3. }

示例代码

  1. var slider = api.require('slider');
  2. slider.show({
  3. id: 1
  4. });

补充说明

可用性

iOS系统,Android系统

可提供的1.0.0及更高版本

hide

隐藏滑动器

hide(callback(ret, err))

params

id:

  • 类型:数字
  • 默认值:无
  • 描述:菜单 id
  • 备注:若 open 接口内 multiOpen 不传或传 false,则本参数被忽略

callback(ret, err)

ret:

  • 类型:JSON 对象
  • 内部字段:
  1. {
  2. status:true //操作成功状态值,布尔值
  3. }

err:

  • 类型:JSON 对象
  • 内部字段:
  1. {
  2. msg: '' //错误描述,字符串
  3. }

示例代码

  1. var slider = api.require('slider');
  2. slider.hide({
  3. id: 1
  4. });

补充说明

可用性

iOS系统,Android系统

可提供的1.0.0及更高版本