doubleSlider

来自于:官方立即使用

概述

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

图片说明

open

打开doubleSlider

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

params

orientation:

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

animation:

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

rect:

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

bubble:

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

handler

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

bar:

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

value:

  • 类型:JSON 类型
  • 描述:滑动控件的值设置
  • 内部字段:
{
    min: 0,                            //数字类型;滑动控件的最小值
    max: 100,                          //数字类型;滑动控件的最大值
    step: 0.1,                         //数字类型;滑动时的步幅
    lowerInit: 50,                     //数字类型;较小值初始值
    upperInit: 100,                    //数字类型;较大值始值
}

fixedOn:

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

fixed:

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

frequency:

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

callback(ret, err)

ret:

  • 类型:JSON 对象内部字段:
{
    id: 1,                      //数字类型;滑动控件的唯一标识,由模块内部自动生成
    eventType: 
    'sliding' ,      //字符串类型;滑动控件值改变时触发;取值范围如下:
                                //show: 控件初始化成功并显示
                                //sliding:滑动中
                                //end:滑动结束
                                //set:被 setValue 改变
                                //click:滑动条被点击
   handleSlider:'none',//字符串类型;正在被操作的slider;取值范围如下:
                                //none:滑动条被点击
                                //lower:较小值滑块被点击
                                //upper:较大值滑块被点击
                                //both:较大值滑块和较小值滑块被同时点击
    lowerValue: 50              //滑动控件的较小值的当前值,在eventType 的所有事件中都会返回
    upperValue: 100             //滑动控件的较大值的当前值,在 eventType 的所有事件中都会返回

}

示例代码

var doubleSlider = api.require('doubleSlider');
doubleSlider.open({
    animation: true,
    orientation: 'horizontal',
    rect: {
        x: 0,
        y: 0,
        size: 300
    },
    bubble: {
        direction: 'top',
        state: 'always',
        w: 80,
        h: 30,
        size: 14,
        color: '#888',
        bg: 'widget://res/slider/bubble.png',
        prefix: '温度:',
        suffix: '摄氏度'
    },
    handler: {
        w: 10,
        h: 8,
        lowerBg: 'widget://res/slider/lower.png',
        upperBg: 'widget://res/slider/upper.png'
    },
    bar: {
        h: 4,
        bg: 'widget://res/slider/lowerBackgroud.png',
        active: 'widget://res/slider/bar-active.png'
    },
    value: {
        min: 16,
        max: 32,
        step: 0.5,
        lowerInit: 20,
        upperInit:30
    },
    fixedOn: api.frameName,
    fixed: false
}, function(ret, err) {
    if (ret) {
        alert(JSON.stringify(ret));
    } else {
        alert(JSON.stringify(err));
    }
});

可用性

iOS系统,Android系统

可提供的1.0.0及更高版本

setValue

设置doubleSlider的值

setValue({params})

params

id:

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

value:

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

示例代码

var doubleSlider = api.require('doubleSlider');
doubleSlider.setValue({
    id: 1,
    value: {
         min: 16,
          max: 32,
          step:1,
          lowerValue: 51,
         upperValue:80
    }

});

可用性

iOS系统,Android系统

可提供的1.0.0及更高版本

lock

锁定doubleSlider的值

lock({params})

params

id:

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

lock:

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

示例代码

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

可用性

iOS系统,Android系统

可提供的1.0.0及更高版本

close

关闭doubleSlider

close(params)

params

id:

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

示例代码

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

可用性

iOS系统,Android系统

可提供的1.0.0及更高版本

show

显示双向滑动条

show(callback(ret, err))

params

id:

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

示例代码

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

补充说明

可用性

iOS系统,Android系统

可提供的1.0.0及更高版本

hide

隐藏双向滑动条

hide(callback(ret, err))

params

id:

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

示例代码

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

可用性

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:大值滑块

示例代码

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

可用性

iOS系统,Android系统

可提供的1.0.0及更高版本