egret-docs-master/extension/EUI/controls/slider
guofei 4fe0162b34 fist commit 2024-06-19 13:32:32 +08:00
..
56015a0c6ebed.png fist commit 2024-06-19 13:32:32 +08:00
56015a1432390.png fist commit 2024-06-19 13:32:32 +08:00
README.md fist commit 2024-06-19 13:32:32 +08:00

README.md

在 eui 中有滑块控件(类似于手机上亮度调节器)。根据方向,分为eui.HSlider 水平滑块控件和 eui.VSlider 垂直滑块控件。

eui.HSlidereui.VSlider 继承自 eui.Range 控件。可以设置 maximumminimum value 等属性。

  • maximum:最大值
  • minimum:最小值
  • value:初始值

水平滑块控件

private initHSlider():void {
    var hSlider: eui.HSlider = new eui.HSlider();
    hSlider.width = 200;
    hSlider.x = 20;
    hSlider.y = 20;
    hSlider.minimum = 0;//定义最小值
    hSlider.maximum = 100;//定义最大值
    hSlider.value = 10;//定义默认值
    hSlider.addEventListener(eui.UIEvent.CHANGE, this.changeHandler, this);
    this.addChild(hSlider);
}
private changeHandler(evt: eui.UIEvent): void {
    console.log(evt.target.value);
}

得到的效果:

垂直滑块控件

private initVSlider():void {
    var vSlider: eui.VSlider = new eui.VSlider();
    vSlider.height = 200;
    vSlider.x = 100;
    vSlider.y = 60;
    vSlider.minimum = 100;//定义最小值
    vSlider.maximum = 200;//定义最大值
    vSlider.value = 120;//定义默认值
    vSlider.addEventListener(eui.UIEvent.CHANGE, this.changeHandler, this);
    this.addChild(vSlider);
}
private changeHandler(evt: eui.UIEvent): void {
    console.log(evt.target.value);
}

得到的效果:

同前面一节一样,这里也使用:

egret create HelloEUI --type eui

创建示例项目的默认皮肤。可以在示例项目的eui_skins文件夹下找到默认皮肤的 exml 文件。