doubleSlider

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 类型
  • 描述：（可选项）插件的位置及尺寸(底部滑杆)
  • 内部字段：
{
    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:'show'//字符串类型；滑动控件值改变时触发；取值范围如下：
                                //show: 控件初始化成功并显示
                                 //sliding：滑动中
                                //end：滑动结束
                                //click：滑动条被点击
   handleSlider:'lower',//字符串类型；正在被操作的slider；取值范围如下：
                                //lower:较小值滑块被点击
                                //upper:较大值滑块被点击
    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及更高版本

是否仍需要帮助？ 请保持联络！
最后更新于 2024/11/18