UISlider

open lock show

概述

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

open

打开 UISlider

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

orientation：

  • 类型：字符串类型
  • 描述：（可选项）滑动控件的朝向：vertical | horizontal
  • 默认：horizontal

animation：

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

rect：

  • 类型：JSON 类型
  • 描述：（可选项）模块的位置及尺寸
  • 内部字段：

isCorner：

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

radius：

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

gradual：

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

bubble：

  • 类型：JSON 类型
  • 描述：提示气泡设置
  • 内部字段：
  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.     prefix: '温度：',                  //（可选项）字符串类型；气泡文字的前缀；默认：未设置时不显示前缀
  12.     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 类型
  • 描述：滑动控件的值设置
  • 内部字段：
  • 类型：字符串类型
  • 描述：（可选项）模块视图添加到指定 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：滑动条被点击
  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.     handler: {
  21.         w: 10,
  22.         h: 8,
  23.         bg: 'widget://res/slider/handler.png'
  24.     },
  25.     bar: {
  26.         h: 4,
  27.         bg: 'widget://res/slider/background.png',
  28.         active: 'widget://res/slider/bar-active.png'
  29.     },
  30.     value: {
  32.         max: 32,
  33.         step: 0.5,
  34.         init: 26
  35.     },
  36.     fixedOn: api.frameName,
  37.     fixed: false
  38. }, function(ret, err) {
  39.     if (ret) {
  40.         alert(JSON.stringify(ret));
  41.     } else {
  42.         alert(JSON.stringify(err));
  43.     }
  44. });

可用性

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. }

示例代码

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系统

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：

  • 类型：字符串类型

可用性

iOS系统，Android系统

可提供的1.0.0及更高版本