laya自定义滚动条

滚动条不是纯色, 不好缩放, 可以使用蒙版自己移动图片

 

 testBar是滚动条, 使用jdt.png, jdt$bar是个透明图片. bar2蓝色的图, 使用barMask做蒙版

const { regClass, property } = Laya;

@regClass()
export class Main extends Laya.Script {
    private _testBar!: Laya.ProgressBar;
    private _barMask!: Laya.Sprite;
    private _dog!: Laya.Sprite;

    onAwake(): void {
        this._testBar = this.owner.getChildByName("testBar") as Laya.ProgressBar;
        this._barMask = this._testBar.getChildByName("bar2").getChildByName("barMask") as Laya.Sprite;
        this._dog = this._testBar.getChildByName("dog") as Laya.Sprite;
        this._testBar.on(Laya.Event.CHANGE, this, this.onTestBarChange);
    }
   
    onStart() {
        console.log("Game start");
        Laya.timer.loop(100, this, this.onUpdateBar);
    }

    onUpdateBar(): void {
        this._testBar.value += 0.01;
        if (this._testBar.value >= 1) {
            this._testBar.value = 0;
        }
    }

    private onTestBarChange(): void {
        this._barMask.x = (this._testBar.value - 1) * this._testBar.width;
        this._dog.x = this._testBar.width * this._testBar.value;
    }
}

Laya 3.0.10 示例下载