UISlider

来自于:官方立即使用

open setValue lock close show hide

概述

UISlider 封装了一个滑动器,开发者可自定义最大值、最小值、当前值以及拖动滑块时的气泡提示信息等各种滑动器用到的功能,支持同个页面打开多个模块。原生代码比前端实现更加流畅稳定。该模块是 slider 模块的升级版

UISlider - 图1

open

打开 UISlider

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

params

orientation:

  • 类型:字符串类型
  • 描述:(可选项)滑动控件的朝向:vertical | horizontal
  • 默认:horizontal

animation:

  • 类型:布尔类型
  • 描述:(可选项)当值发生改变时,如 click 事件,是否为滑块的移动显示动画
  • 默认:true

rect:

  • 类型:JSON 类型
  • 描述:(可选项)模块的位置及尺寸
  • 内部字段:
  1. {
  2. x: 0, //(可选项)数字类型;模块左上角的 x 坐标(相对于所属的 Window 或 Frame);默认值:0
  3. y: 0, //(可选项)数字类型;模块左上角的 y 坐标(相对于所属的 Window 或 Frame);默认值:0
  4. size: 300, //(可选项)数字类型;根据 orientation 的值决定模块的宽度或高度,orientation 为 vertical 时为高度,反之为宽度;默认值:所属的 Window 或 Frame 的宽度或高度
  5. }

isCorner:

  • 类型:布尔类型
  • 描述:(可选项)是否需要圆角(仅支持颜色,不支持图片设置) 仅支持iOS
  • 默认:false

radius:

  • 类型:数字类型
  • 描述:(可选项)滑动条圆角度 仅支持安卓
  • 默认:0

gradual:

  • 类型:字符串类型
    • 描述:(可选项)方向;仅orientation为vertical时有效
    • 取值范围:‘up’/向上增长,‘down’/向下增长
    • 默认:down

bubble:

  • 类型:JSON 类型
  • 描述:提示气泡设置
  • 内部字段:
  1. {
  2. state: 'always', //(可选项)字符串类型;提示气泡显示状态;默认:highlight;取值范围如下:
  3. //always(一直显示)
  4. //highlight(当用户与滑动控件有交互时显示一段时间)
  5. //hide(不显示)
  6. direction: 'top', //(可选项)字符串类型;气泡弹出方向,取值范围:top(往上弹出)、bottom(往下弹出);默认:top
  7. w: 80, //(可选项)数字类型;气泡宽度,若不传则自适应宽度;默认:自适应内容的宽度
  8. h: 30, //(可选项)数字类型;气泡高度;默认:30
  9. size: 14, //(可选项)数字类型;气泡内文字大小;默认:14
  10. color: '#888', //(可选项)字符串类型;气泡内文字颜色,支持 rgb,rgba,#;默认:#888
  11. bg: 'widget://res/slider/bubble.png', //(可选项)字符串类型;气泡的背景图片路径,要求本地路径(widget://、fs://)
  12. prefix: '温度:', //(可选项)字符串类型;气泡文字的前缀;默认:未设置时不显示前缀
  13. suffix: '摄氏度' //(可选项)字符串类型;气泡文字的后缀;默认:未设置时不显示后缀
  14. }

handler

  • 类型:JSON 类型
  • 描述:滑块设置
  • 内部字段:
  1. {
  2. w: 10, //(可选项)数字类型;滑块宽度;默认:10
  3. h: 8, //(可选项)数字类型;滑块高度;默认:bar.h + 4
  4. bg: 'widget://res/slider/handler.png', //字符串类型;滑块图片的路径,要求本地路径(widget://、fs://)
  5. }

bar:

  • 类型:JSON 类型
  • 描述:滑动条设置
  • 内部字段:
  1. {
  2. h: 4, //(可选项)数字类型;滑动条的高度;默认:4
  3. bg: 'widget://res/slider/background.png', //字符串类型;滑动条的背景,支持:rgb,rgba,#,img
  4. active: 'widget://res/slider/bar-active.png', //(可选项)字符串类型;滑动条滑块已选择区域背景,支持:rgb,rgba,#,img;默认:透明
  5. }

value:

  • 类型:JSON 类型
  • 描述:滑动控件的值设置
  • 内部字段:
  1. {
  2. min: 0, //数字类型;滑动控件的最小值
  3. max: 100, //数字类型;滑动控件的最大值
  4. step: 0.1, //数字类型;滑动时的步幅
  5. init: 50, //数字类型;初始值
  6. }

fixedOn:

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

fixed:

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

callback(ret, err)

ret:

  • 类型:JSON 对象内部字段:
  1. {
  2. id: 1, //数字类型;滑动控件的唯一标识,由模块内部自动生成
  3. eventType: 'sliding' , //字符串类型;滑动控件值改变时触发;取值范围如下:
  4. //show: 控件显示
  5. //sliding:滑动中
  6. //end:滑动结束
  7. //set:被 setValue 改变
  8. //click:滑动条被点击
  9. value: 50 //滑动控件的当前值,在 eventType 的所有事件中都会返回
  10. }

示例代码

  1. var uislider = api.require('UISlider');
  2. uislider.open({
  3. animation: true,
  4. orientation: 'horizontal',
  5. rect: {
  6. x: 0,
  7. y: 0,
  8. size: 300
  9. },
  10. bubble: {
  11. direction: 'top',
  12. state: 'always',
  13. w: 80,
  14. h: 30,
  15. size: 14,
  16. color: '#888',
  17. bg: 'widget://res/slider/bubble.png',
  18. prefix: '温度:',
  19. suffix: '摄氏度'
  20. },
  21. handler: {
  22. w: 10,
  23. h: 8,
  24. bg: 'widget://res/slider/handler.png'
  25. },
  26. bar: {
  27. h: 4,
  28. bg: 'widget://res/slider/background.png',
  29. active: 'widget://res/slider/bar-active.png'
  30. },
  31. value: {
  32. min: 16,
  33. max: 32,
  34. step: 0.5,
  35. init: 26
  36. },
  37. fixedOn: api.frameName,
  38. fixed: false
  39. }, function(ret, err) {
  40. if (ret) {
  41. alert(JSON.stringify(ret));
  42. } else {
  43. alert(JSON.stringify(err));
  44. }
  45. });

可用性

iOS系统,Android系统

可提供的1.0.0及更高版本

setValue

设置 UISlider 的值

setValue({params})

params

id:

  • 类型:数字类型
  • 描述:指定滑动控件的唯一标识,当 open 成功后返回

value:

  • 类型:JSON 类型
  • 描述:要设置的值
  • 内部字段:
  1. {
  2. min: 0, //(可选项)数字类型;滑动控件的最小值;默认:原值
  3. max: 100, //(可选项)数字类型;滑动控件的最大值;默认:原值
  4. step: 1, //(可选项)数字类型;滑动时的步幅;默认:原值
  5. value: 50 //(可选项)数字类型;要设置的当前值;默认:原值
  6. }

示例代码

  1. var uislider = api.require('UISlider');
  2. uislider.setValue({
  3. id: id,
  4. value: {
  5. min: 16,
  6. max: 32,
  7. step: 0.5,
  8. value: 23
  9. }
  10. });

可用性

iOS系统,Android系统

可提供的1.0.0及更高版本

lock

设置滑动控件是否锁定

lock({params})

params

id:

  • 类型:字符串类型
  • 描述:指定滑动控件的唯一标识,当 open 成功后返回

lock:

  • 类型:布尔类型
  • 描述:(可选项)是否锁定指定模块
  • 默认:true(锁定)

示例代码

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

可用性

iOS系统,Android系统

可提供的1.0.0及更高版本

close

关闭滑动控件

close({params})

params

id:

  • 类型:字符串类型
  • 描述:指定滑动控件的唯一标识,当 open 成功后返回

示例代码

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

可用性

iOS系统,Android系统

可提供的1.0.0及更高版本

show

显示滑动器

show(callback(ret, err))

params

id:

  • 类型:字符串类型
  • 描述:指定滑动控件的唯一标识,当 open 成功后返回

示例代码

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

可用性

iOS系统,Android系统

可提供的1.0.0及更高版本

hide

隐藏滑动器

hide(callback(ret, err))

params

id:

  • 类型:字符串类型
  • 描述:指定滑动控件的唯一标识,当 open 成功后返回

示例代码

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

可用性

iOS系统,Android系统

可提供的1.0.0及更高版本