Layabox 实现 PageView 翻页

 Layabox 中没有 PageView这个组件，cocos creater中有，但是我们可以轻松地使用 List来实现PageView功能。

具体方式是计算出滚动后要停在所在的Cell的索引值，使用通过 List的tweenTo方法来滚动到相应位置。

先看下面的效果

下面是代码：

package
{
    import ui.PageViewTestUI;
    import laya.utils.Handler;
    import laya.ui.Box;
    import laya.ui.Label;
    import laya.events.Event;

    public class TestViewCtr extends PageViewTestUI{

        private var _isDown:Boolean;
        private var _stageX:Number;
        private var _page:int = 0;

        public override function onOpened(param:*):void {
            var arr:Array=[];
            //2行4列，所以数量必须是 8的倍数，如果不够的，用null来填充。
            for(var i:int = 0 ;i<48;++i){
                if(i<42)
                    arr.push({label:i+""});
                else
                    arr.push(null)
            }

            var itemWidth:Number = 100;
            myPage.repeatX = 4;
            //动态计算spaceX
            myPage.spaceX = (myPage.width-itemWidth*myPage.repeatX)/(myPage.repeatX+1);
            myPage.hScrollBarSkin=null;//让其可以水平滚动
            myPage.renderHandler = new Handler(this,onItemRender);
			myPage.array = arr;

            myPage.on(Event.MOUSE_DOWN,this,onDown);
            myPage.on(Event.MOUSE_UP,this,onUp);
            myPage.on(Event.MOUSE_OUT,this,onUp);
            Laya.stage.on(Event.MOUSE_OUT,this,onUp);
		}

        private function onDown(e:Event):void
        {
            _isDown = true;
            _stageX = e.stageX;
        }

        private function onUp(e:Event):void
        {
            if(!_isDown) return ;
            _isDown = false;

            var cha:Number = e.stageX-_stageX;
            if(cha<-8)
            {
                 _page++;
                if(_page>myPage.totalPage-1) _page=myPage.totalPage-1;
            }
            else if(cha>8)
            {
                _page--;
                if(_page<0) _page=0;
            }
            var idx:int=_page * myPage.repeatX * myPage.repeatY;
            myPage.tweenTo(idx,500);
        }

        private function onItemRender(cell:Box,index:int):void{
            cell.x += myPage.spaceX/4; //让cell居中
            if(myPage.array[index]){
                cell.visible=true;
                (cell.getChildByName("lbl") as Label).text= myPage.array[index].label;
            }
            else
            {
                cell.visible=false;
            }
        }
    }

}