doubleSlider

来自于：AC模块工作室立即使用

open setValue lock close show hide setBubble

论坛示例

为帮助用户更好更快的使用模块，论坛维护了一个示例，示例中包含示例代码供您参考。

概述

doubleSlider 封装了一个双向滑动条，开发者可自定义最大值、最小值、当前值以及拖动滑块时的气泡提示信息等各种滑动器用到的功能。原生代码比前端实现更加流畅稳定。

图片说明

open

打开doubleSlider

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

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/bubble.png',    //（可选项）字符串类型；气泡的背景图片路径，要求本地路径（widget://、fs://）
  12.     prefix: '温度：',                  //（可选项）字符串类型；气泡文字的前缀；默认：未设置时不显示前缀
  13.     suffix: '摄氏度'                   //（可选项）字符串类型；气泡文字的后缀；默认：未设置时不显示后缀
  14. }

handler

  • 类型：JSON 类型
  • 描述：滑块设置
  • 内部字段：
  1. {
  2.     w: 10,                             //（可选项）数字类型；滑块宽度；默认：10
  3.     h:  8,                             //（可选项）数字类型；滑块高度；默认：bar.h + 4
  4.     lowerBg: 'widget://res/slider/handler.png', //字符串类型；较小值滑块图片的路径，要求本地路径（widget://、fs://）
  5.     upperBg: 'widget://res/slider/handler.png', //字符串类型；较大值滑块图片的路径，要求本地路径（widget://、fs://）
  6. }

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.     lowerInit: 50,                     //数字类型；较小值初始值
  6.     upperInit: 100,                    //数字类型；较大值始值
  7. }

fixedOn：

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

fixed:

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

frequency：

  • 类型：字符串
  • 描述：（可选项）滑动时回调函数触发的频率
  • 默认：continuous
    • step：每滑动 step （与value参数内的step一致）距离触发一次回调
    • continuous：连续的回调

callback(ret, err)

ret：

  • 类型：JSON 对象内部字段：
  1. {
  2.     id: 1,                      //数字类型；滑动控件的唯一标识，由模块内部自动生成
  3.     eventType:'show'//字符串类型；滑动控件值改变时触发；取值范围如下：
  4.                                 //show: 控件初始化成功并显示
  5.                                  //sliding：滑动中
  6.                                 //end：滑动结束
  7.                                 //click：滑动条被点击
  8.    handleSlider:'lower',//字符串类型；正在被操作的slider；取值范围如下：
  9.                                 //lower:较小值滑块被点击
  10.                                 //upper:较大值滑块被点击
  11.     lowerValue: 50              //滑动控件的较小值的当前值，在eventType 的所有事件中都会返回
  12.     upperValue: 100             //滑动控件的较大值的当前值，在 eventType 的所有事件中都会返回
  14. }

示例代码

  1. var doubleSlider = api.require('doubleSlider');
  2. doubleSlider.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.         lowerBg: 'widget://res/slider/lower.png',
  25.         upperBg: 'widget://res/slider/upper.png'
  26.     },
  27.     bar: {
  28.         h: 4,
  29.         bg: 'widget://res/slider/lowerBackgroud.png',
  30.         active: 'widget://res/slider/bar-active.png'
  31.     },
  32.     value: {
  33.         min: 16,
  34.         max: 32,
  35.         step: 0.5,
  36.         lowerInit: 20,
  37.         upperInit:30
  38.     },
  39.     fixedOn: api.frameName,
  40.     fixed: false
  41. }, function(ret, err) {
  42.     if (ret) {
  43.         alert(JSON.stringify(ret));
  44.     } else {
  45.         alert(JSON.stringify(err));
  46.     }
  47. });

可用性

iOS系统，Android系统

可提供的1.0.0及更高版本

setValue

设置doubleSlider的值

setValue({params})

params

id：

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

value:

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

示例代码

  1. var doubleSlider = api.require('doubleSlider');
  2. doubleSlider.setValue({
  3.     id: 1,
  4.     value: {
  5.          min: 16,
  6.           max: 32,
  7.           step:1,
  8.           lowerValue: 51,
  9.          upperValue:80
  10.     }
  12. });

可用性

iOS系统，Android系统

可提供的1.0.0及更高版本

lock

锁定doubleSlider的值

lock({params})

params

id：

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

lock:

  • 类型：布尔类型
  • 描述：（可选项）是否锁定指定模块
  • 默认：true（锁定）

示例代码

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

可用性

iOS系统，Android系统

可提供的1.0.0及更高版本

close

关闭doubleSlider

close(params)

params

id：

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

示例代码

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

可用性

iOS系统，Android系统

可提供的1.0.0及更高版本

show

显示双向滑动条

show(callback(ret, err))

params

id：

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

示例代码

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

补充说明

无

可用性

iOS系统，Android系统

可提供的1.0.0及更高版本

hide

隐藏双向滑动条

hide(callback(ret, err))

params

id：

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

示例代码

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

可用性

iOS系统，Android系统

可提供的1.0.0及更高版本

setBubble

若滑动选择器配置显示了气泡，通过调用此接口可自定义气泡显示内容，此时模块会忽略选择器的气泡显示的当前值（open -> bubble 配置显示的内容———-prefix + 当前值 + suffix）。

setBubble(callback(ret, err))

params

id：

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

content：

  • 类型：字符串
  • 描述：（可选项）气泡自定义显示的文本内容，若不传或传空，则选择器气泡恢复显示 open -> bubble 配置显示的内容（prefix + 当前值 + suffix）

handler：

  • 类型：字符串
  • 描述：（可选项）指定设置气泡的滑块
  • 默认：upper
  • 取值范围：
    • lower：小值滑块
    • upper：大值滑块

示例代码

  1. var doubleSlider = api.require('doubleSlider');
  2. doubleSlider.setBubble({
  3.     id: 1,
  4.     content: '不限'
  5. });

可用性

iOS系统，Android系统

可提供的1.0.0及更高版本