laya列表连续请求例子

laya列表连续请求例子, 分页请求数据, 使用的是Laya 3.0.10版本

export class TestPanel extends TestPanelBase {
    private _packetData: any = []; // 列表数据
    private _pageSize: number = 20; // 每页条数
    private _pageIndex = 0;   // 当前页码，从 0 开始
    private _isLoading = false; // 防止重复请求
    private _lastPageSize: number = -1; // 最后一页条数
    onAwake(): void {
        this.listPacket.on(Laya.Event.MOUSE_DOWN, this, this.onListScroll);
        this.loadPage(0);
    }


    /** 滚动到底部时触发 */
    private onListScroll(): void {
        let scrollBar = this.listPacket.scrollBar;
        if(this._packetData.length > 0 && this._packetData.length % this._pageSize != 0) {
            this._lastPageSize = this._packetData.length % this._pageSize;
            if(this._lastPageSize != this._pageSize) {
                // 最后一页不是整页, 不再请求
                return;
            }
        }
        if(scrollBar.value >= scrollBar.max) {
            // 当前滚动条到最底部时才加载下一页
            this.loadPage(this._pageIndex + 1);
        }
    }
    
    /**
     * 刷新红包数据
     * @param startIndex 开始索引
     */
    private loadPage(pageIndex : number) {
        if (this._isLoading) {
            return;
        }
        this._isLoading = true;
        if(pageIndex == 0) {
            this._pageIndex = 0;
            this._packetData = [];
        }
        let oldMaxIdx = this._packetData.length - 1;
        const startIndex = pageIndex * this._pageSize;
        WebAPI.post('/getData', { uid: userData.uid,  token:userData.token, start:startIndex, count:this._pageSize }, (response:any)=>{
            response = JSON.parse(response);
            if(response.code == 0) {
                if(response.data) {
                    this._pageIndex = pageIndex;
                    this._packetData = this._packetData.concat(response.data);
                    this.listPacket.array = this._packetData;
                    if(this._packetData.length > oldMaxIdx + 1) {
                        this.listPacket.tweenTo(oldMaxIdx + 1, 500);
                    } else {
                        this.listPacket.tweenTo(oldMaxIdx);
                    }
                } else {
                    this.listPacket.array = this._packetData;
                }
            }
            this._isLoading = false;
            //console.log("加载页:" + pageIndex, response);
        }, this);
    }
}

上面例子中listPacket是Laya.List, 在鼠标MOUSE_DOWN, 事件中检查是否到达最底部, 然后加载新的数据, 附加到已有数据中.

Laya.List如果界面上, 如果是竖着可视的只有5条, 不要设置list的repeatY值大于5, 如果大于5, 会出现上下滚动不了.