3.2.7.12 Slider 组件参考

Slider 是一个滑动器组件。

点击 属性检查器 下面的 添加组件 按钮，然后从 UI 组件 中选择 Slider，即可添加 Slider 组件到节点上。

滑动器的脚本接口请参考 Slider API。

Slider 属性

Slider 事件

Slider 的事件回调有两个参数，第一个参数是 Slider 本身，第二个参数是 CustomEventData

详细说明

Slider 通常用于调节数值的 UI（例如音量调节），它主要的部件一个滑块按钮，该部件用于用户交互，通过该部件可进行调节 Slider 的数值大小。

通常一个 Slider 的节点树如下图：

通过脚本代码添加回调

方法一

这种方法添加的事件回调和使用编辑器添加的事件回调是一样的，都是通过代码添加。首先需要构造一个 cc.Component.EventHandler 对象，然后设置好对应的 target、component、handler 和 customEventData 参数。

var sliderEventHandler = new cc.Component.EventHandler();
sliderEventHandler.target = this.node; // 这个 node 节点是你的事件处理代码组件所属的节点
sliderEventHandler.component = "cc.MyComponent"
sliderEventHandler.handler = "callback";
sliderEventHandler.customEventData = "foobar";

slider.slideEvents.push(sliderEventHandler);

// here is your component file
cc.Class({
    name: 'cc.MyComponent'
    extends: cc.Component,

    properties: {
    },

    callback: function(slider, customEventData) {
        // 这里 slider 是一个 cc.Slider 对象
        // 这里的 customEventData 参数就等于你之前设置的 "foobar"
    }
});

方法二

通过 slider.node.on('slide', ...) 的方式来添加

// 假设我们在一个组件的 onLoad 方法里面添加事件处理回调，在 callback 函数中进行事件处理:

cc.Class({
    extends: cc.Component,


    properties: {
       slider: cc.Slider
    },

    onLoad: function () {
       this.slider.node.on('slide', this.callback, this);
    },

    callback: function (slider) {
       // 回调的参数是 slider
       // do whatever you want with the slider
    }
});