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 示例下载