eui-eui.List

eui.List 使用範例, eui.List 繼承於 eui.DataGroup, 以下為循環列表製作

class Main extends eui.UILayer {

    protected createChildren(): void {
        super.createChildren();
        egret.lifecycle.onPause = () => egret.ticker.pause();
        egret.lifecycle.onResume = () => egret.ticker.resume();
        egret.registerImplementation('eui.IAssetAdapter', new AssetAdapter());
        egret.registerImplementation('eui.IThemeAdapter', new ThemeAdapter());
        this.runGame();
    }

    private async loadResource() {
        let loadingView = this.stage.addChild(new LoadingUI()) as LoadingUI;
        await RES.loadConfig('resource/default.res.json', 'resource/');
        await new Promise(resolve => new eui.Theme('resource/default.thm.json', this.stage).once(eui.UIEvent.COMPLETE, resolve, this));
        await RES.loadGroup('preload', 0, loadingView);
        this.stage.removeChild(loadingView);
    }

    private async runGame() {
        await this.loadResource();
        // --- Edwin 給你最乾淨的程式碼, 從這行以下開始寫喔 ---

        // 建立 20 個 item
        const list = new eui.List;
        const data = new eui.ArrayCollection;
        for (let i = 1; i <= 20; i++) data.addItem(`news${i}`);
        list.dataProvider = data;

        // 建立 Scroller
        const scrl = new eui.Scroller;
        scrl.viewport = list;
        scrl.width = 300;
        scrl.height = 300;
        this.addChild(scrl);

        // 循環列表主要方法, 主要是數據源搬移
        const updateFunc: Function = function () {
            const startV = (scrl.viewport.contentHeight - scrl.viewport.height) >> 1;
            const dist = scrl.viewport.scrollV - startV;
            const itemHeight = scrl.viewport.contentHeight / data.length;
            const moveCount = ~~(Math.abs(dist) / itemHeight);
            if (moveCount)
                if (dist > 0) {
                    for (let i = 0; i < moveCount; i++)data.addItem(data.removeItemAt(0));
                    scrl.viewport.scrollV -= moveCount * itemHeight;
                } else if (dist < 0) {
                    for (let i = 0; i < moveCount; i++)data.addItemAt(data.removeItemAt(data.length - 1), 0);
                    scrl.viewport.scrollV += moveCount * itemHeight;
                }
        }

        // 開始滑動時觸發一次, 還有每次滑動結束更新一次
        scrl.once(eui.UIEvent.CHANGE_START, updateFunc, this);
        scrl.addEventListener(eui.UIEvent.CHANGE_END, updateFunc, this);

    }

}