玩溜Cocos Creator入门学习（九）UI系统介绍UI组件（Slider）

引言

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的回调函数");
    }
});

个人博客 ：玩溜Cocos Creator入门学习（九）UI系统介绍UI组件（Slider）