Slider

简介

slider 是由滑块与滑动条组成的控件,可计算出滑块在滑动工程中占整个滑动条的比例。可用于来调节声音、颜色和播放进度等。

slider 的基类是 widget , widget 属性及接口详细请查看 widget 控件介绍。基础属性中某些属性在 slider 控件中无效(可以设置这类接口属性,但并无效果,显示状态上并无任何变化,因此可以忽略此类属性),不可用属性有:

  • font:字体属性
  • textAlign:文本对齐方式
  • foreground:前景色属性

Slider属性

公共属性

  • 控件类型

    默认 slider,且不可改动。

  • 透明度

    设置背景颜色的透明度,范围: 0 ~ 255。也可以在背景颜色中设定。

    注:当背景图片的设定不为空时,将自动设置为 0。

名称

  • 控件名称

    设定控件的名称。

    在JS脚本中,可根据控件名称来指定控件,并对其进行设定或操作。

设计

  • 控件锁定

    选项:True/False

    设定该控件是否锁定。

    如果设定值为True,则设计器中无法移动该控件。

  • 是否隐藏控件

    选项:True/False

    设定该控件是否需要隐藏。

    如果设定值为True,设计器与实际效果都不会显示该控件及控件中的内容。

    当控件已隐藏时,可通过在工程管理器中点击来选中该控件。

数据

  • 当前值

    设置滑块的初始设定值。

    控件显示当前进度的长度为 : 控件宽度 * 当前值 / (最大值-最小值)

  • 最大值

    设定滑块能够设定的最大值

  • 最小值

    设定滑块能够设定的最小值

调用属性

  • bindchange

    绑定 change 事件,如果设定值为 onChange 时,当 slider 的滑块改变后时(非实时响应),将调用 JS 脚本中的 Page 对象中的 onChange 函数。

图片

  • 背景图片

    设定控件的背景图片,不支持缩放,且居中显示。

外观

  • 背景颜色

    设定背景颜色,设定背景颜色的ARGB值。

    可打开颜色选择器,通过颜色选择器修改RGB值。

    Alpha 值(即透明度),可以直接修改设定值 或 修改透明度的值。背景颜色的透明度与属性透明度的值会自动保持一致。

  • 已完成进度图

    设定 slider 中用于显示已完成进度的图片。

  • 方向

    选项: 水平/垂直

    设定控件的布局方向。当设定值为水平时,进度调从左向右显示进度;当设定值为垂直时,进度调从下向上显示进度。

  • 滑动色块图片

    设定滑块显示用的图片。

  • 未完成进度图

    设定 slider 中用于显示还未完成进度的图片。

位置属性

  • x坐标点

    设定 控件的左上角 相对于 父控件的左上角 的横坐标。

  • y坐标点

    设定 控件的左上角 相对于 父控件的左上角 的纵坐标。

  • 高度

    设定控件的高度

  • 宽度

    设定控件的宽度

setData

  • 控件自有属性

    属性名 类型 描述 注解
    value Number Slider 控件当前值 Slider 控件有最小值和最大值
  • setData 设置更改属性示例

    示例代码 注解
    this.setData({slider1 : 60}) idslider1 的 Slider 控件当前值置为 60
    this.setData({slider1 : {value : 60}}) idslider1 的 Slider 控件当前值置为 60

sample

sample 演示使用3个 slider 调整 page 的背景颜色

控件布局

layout

界面有6个label,3个slider组成,控件Id如上图红字所示。

3个slider均绑定了 onSlider 函数, 范围: 0 ~ 255 。

JS脚本

var page = {
    red: 255,
    green: 255,
    blue : 255,
    onSlider : function(event) {
        console.dir(event);
        switch(event.target.id) {
            case  "redSlider":
                //根据slider的当前值,设定相应颜色的值
                this.red = event.detail.value;
                //改变对应label的显示文本,并刷新
                this.setData({redValue : {value : event.detail.value}});
                break;
            case "greenSlider":
                this.green = event.detail.value;
                this.setData({greenValue : {value : event.detail.value}});
                break;
            case "blueSlider":
                this.blue = event.detail.value;
                this.setData({blueValue : {value : event.detail.value}});
                break;
            default:
                break;
        }
        // 计算ARGB值,Alpha值定位255
        var color = 255*16*16*16*16*16*16+this.red*16*16*16*16 + this.green*16*16 + this.blue;
        // 设定page的背景颜色,并刷新整个page
        this.setData({page1 :{background :color}})
    },
};

效果

sample