引言
Slider是一个滑动器组件，如图
Slider组件
点击 属性检查器下面的添加组件按钮，然后从添加UI组件中选择Slider，即可添加Slider组件到节点上。
滑动器的脚本接口请参考 Slider API
Slider属性
| 属性 | 功能说明 |
|---|---|
| Handle | 滑动按钮部件，可以通过该按钮进行滑动调节Slider数值大小 |
| direction | 滑动器的方向，横向和竖向 |
| progress | 当前进度值，该数值的区间为0～1之间 |
| slideEvents | 滑动组件事件回调函数 |
Slider事件
| 属性 | 功能说明 |
|---|---|
| target | 带有脚本组件的节点 |
| Component | 脚本组件的名称 |
| Handler | 指定一个回调函数，当Slider的事件发生的时候调用此函数。 |
| CustomEventData | 用户指定任意的字符串作为事件回调的最后一个参数传入 |
Slider的回调有两个参数，第一个参数是Slider本身，第二个参数是CustomEventData
详细说明
Slider通常用于调节数值的UI（例如音量调节、亮度调节等），它主要的部件一个滑动按钮，该部件用于用户交互，通过该部件调节Slider的数值大小。
通常的Slider的节点树，如图：
通过脚本代码添加回调
方法一
该方法跟编辑器添加回调的方法是一样的，都需要我们对slider的属性进行初始化的操作。
cc.Class({
extends: cc.Component,
properties: {
slider: {
type: cc.Slider,
default: null
}
},
// LIFE-CYCLE CALLBACKS:
onLoad () {
var sliderEventHandler = new cc.Component.EventHandler();
sliderEventHandler.target = this.node; //这个 node 节点是你的事件处理代码组件所属的节点
sliderEventHandler.component = "Slider1Script";
sliderEventHandler.handler = "callback";
sliderEventHandler.customEventData = "Slider1的回调函数";
this.slider.slideEvents.push(sliderEventHandler);
},
callback: function(slider, customEventData) {
//这里 slider 是一个 cc.Slider 对象
//这里的 customEventData 参数就等于你之前设置的 "foobar"
console.log("Slider1的回调函数");
},
start () {
},
// update (dt) {},
});
方法二
使用编辑器选定脚本中的方法
cc.Class({
extends: cc.Component,
properties: {
},
callback: function(slider, customEventData) {
//这里 slider 是一个 cc.Slider 对象
//这里的 customEventData 参数就等于你之前设置的 "foobar"
console.log("Slider2的回调函数");
},
});
方法三
通过 slider.node.on('slide', ...) 的方式来添加
cc.Class({
extends: cc.Component,
properties: {
slider: cc.Slider
},
onLoad: function () {
this.slider.node.on('slide', this.callback, this);
},
callback: function (event) {
var slider = event;
//do whatever you want with the slider
console.log("Slider3的回调函数");
}
});
