Slider
Slider 屬性
| 屬性 | 功能說明 |
|---|---|
| Handle | Slider 上按鈕的 Sprite |
| Direction | Slider 的方向，分為Horizontal和Vertical |
| Progress | 當前的進度值，區間為0~1 |
| ClickEvent | Slider 滑動事件的列表 |
Slider Event Structure
| 屬性 | 功能說明 |
|---|---|
Target |
帶有 Script 的 Node |
Component |
該 Node 底下 Script 的名稱 |
Handler |
Script 底下欲 call 的 function 名稱 |
CustomEventData |
可以指定任意的字符作為最後一個參數傳入 |
Warning
建議此類的事件一率寫在Script中，盡量不要使用拉Node的方式在場景中綁定事件，方便Debug追蹤及後續維護。
Slider 範例
import { _decorator, Component, Slider } from "cc";
const { ccclass, property } = _decorator;
@ccclass("SliderHandler")
export class SliderHandler extends Component {
protected onLoad(): void {
const slider = this.getComponent(Slider);
if (slider) {
slider.node.on("slide", this.onSliderChange, this);
}
}
private onSliderChange(slider: Slider): void {
// slider.progress表示的是目前slider所在位置對於整個bar的比例
console.log("Slider value:", slider.progress);
}
}