问题背景

Laya 1.x中没有PageView组件，就是一次滑动一整页的组件。

解决方法

替代方案是用List组件来实现一个。

方案要点

1. 在触摸事件中处理翻页
2. 利用List组件的成员scrollBar得到当前滑动的位置，然后计算出需要自动翻到第几页
3. 利用List组件tweenTo方法来做翻页动画
4. 翻页后发送翻页事件

代码

export class PageView extends Laya.List{
    constructor(){
        super();

        this.on(Laya.Event.MOUSE_UP, this, this.onMouseUp);
        this.on(Laya.Event.MOUSE_OUT, this, this.onMouseOut);

        this.renderHandler = Laya.Handler.create(this, this.renderItem);    
        
    }

    destroy(){
        this.off(Laya.Event.MOUSE_UP, this, this.onMouseUp);
        this.off(Laya.Event.MOUSE_OUT, this, this.onMouseOut);
    }

    onMouseUp(event){
        this._updatePage();
    }

    // onMouseMove(event){
    //     console.info("PageView: mouse move => ", event);
    // }

    onMouseOut(event){
        // console.info("PageView: mouse out => ", event);
        this._updatePage();
    }

    private _currentPage:number = 0;
    private _updatePage(){
        // 参考：https://gitee.com/hopher/layaair/blob/master/src/ui/src/laya/ui/List.as
        // this.tweenTo(0);
        // this.onScrollBarChange
        
        // 停止滚动
        this.scrollBar.stopScroll();
        // 滑行到下一页的位置
        // let length:number = this._array.length;
		// let totalPage = Math.ceil(length / (this.repeatX * this.repeatY));
        // let numX:number = this._isVertical ? this.repeatX : this.repeatY;
        // let numY:number = this._isVertical ? this.repeatY : this.repeatX; // 
        // let lineCount:number = Math.ceil(length / numX); // 总的行数
        let total = this._cellOffset > 0 ? this.totalPage + 1 : this.totalPage;

        let pageId = 0;
        if (total > 1) {
            pageId = Math.ceil((this.scrollBar.value - this._cellOffset - this._cellSize/2)/this._cellSize);
        } else {
            // this._scrollBar.setScroll(0, 0, 0);
            // this._scrollBar.target = this._content;
        }

        // console.info("Slider pos => ", this.scrollBar.slider.value);
        // console.info(`Neareast item id: ${pageId}`);
        this.tweenTo(pageId);
        this._currentPage = pageId;
        if(this._onPageChange){
            this._onPageChange(pageId);
        }
    }

    public get pageId(){
        return this._currentPage;
    }

    public set pageId(n:number){
        this._currentPage = n;
        this.tweenTo(n);
    }

    // onScrollBarChange(event){
    //     super.onScrollBarChange(event);
        
    //     console.info("ScrollBar Change => ", this.scrollBar.slider.value);
    // }

    private _onPageChange:(pageId:number)=>void = null;
    public set onPageChangeHandler(handler:(pageId:number)=>void){
        this._onPageChange = handler;
    }
    public get onPageChangeHandler(){
        return this._onPageChange;
    }
}