Laya學習筆記-04使用ScrollBar滾動文本

一、場景搭建

1.在Laya->工程->Scenes->新建->頁面/場景 新建一個場景命名爲“Main”

2.設置新建的場景屬性

3.創建一個Text類型的UI組件

4.在右邊Text的屬性欄中設置Text的寬高及位置

5.設置Text的文本內容、字體大小、字體顏色、自動換行、垂直間距、文本超出文本域行爲

6.在“層級”面版->Scene->創建UI組件->VScrollBar 

7.設置VScrollBar的高度及位置

 

二、代碼實現

1.新建一個腳本命名爲 “ScrollBarCrtl.js”，代碼實現如下

export default class ScrollBarCrtl extends Laya.Script {

    constructor() {
        super();
        /** @prop {name:txt, tips:"提示文本", type:Node, default:null}*/
        this.txt=null;
        /** @prop {name:scrollbar, tips:"提示文本", type:Node, default:null}*/
        this.scrollbar=null;

    }

    onAwake() {

    }

    onUpdate(){

        this.txt.scrollY=this.scrollbar.value*this.txt.maxScrollY;
    }
}

2. 將“ScrollBarCrtl.js”代碼掛載在Scene中

3.將我們上面新建的 Text 和 VScrollBar 指定到“ScrollBarCrtl.js”腳本屬性中，大功告成！