Laya 滑动切换的ViewStack

Laya 滑动切换的ViewStack

@ixenos 2020-10-29 11:08:36

1.查看ViewStack源码，发现只是个简单的visible切换，我们继承修改一下，实现缓动切换

    /**
     * 使用运动切换的ViewStack 
     * @author ixenos 2020-10-14 18:29:22
     * 
     */
    public class CViewStack extends ViewStack
    {
        /**
         * 运动模式 
         */
        public var motionMode:Boolean = false;
        
        private var _lastSelectIndex:int = -1;
        private var _tweenStack:Vector.<Tween> = new Vector.<Tween>();
        
        public function CViewStack()
        {
            super();
        }
        
        override public function set selectedIndex(value:int):void {
            if (_selectedIndex != value) {
                if(motionMode){
                    this.disposeItems();
                    var dirV:int = value - _lastSelectIndex;
                    setSelectMotion(_selectedIndex, false, dirV);
                    _selectedIndex = value;
                    setSelectMotion(_selectedIndex, true, dirV);
                    _lastSelectIndex = value;
                }else{
                    setSelect(_selectedIndex, false);
                    _selectedIndex = value;
                    setSelect(_selectedIndex, true);
                }
            }
        }
        
        /**
         * @private
         * @param index 需要设置的对象的索引。
         * @param selected 表示对象的选中状态。
         */
        protected function setSelectMotion(index:int, selected:Boolean, dirV:int):void {
            if (_items && index > -1 && index < _items.length) {
                
                var item:Sprite = _items[index] as Sprite;
                if (item == null) {
                    return;
                }
                
                if(!selected){
                    dirV = -dirV;
                }
                
                var outsideX:Number = (dirV>0?1:-1) * width;
                var motionTime:Number = 500;
                
                item.visible = true;
                var t:Tween;
                if(selected){
                    item.x = outsideX;
                    t = Tween.to(item, {"x":0}, motionTime, Ease.circOut);
                }else{
                    item.x = 0;
                    t = Tween.to(item, {"x":outsideX}, motionTime, Ease.circOut, new Handler(this, com));
                }
                
                _tweenStack.push(t);
                
                function com():void{
                    item.visible = false;
                }
                
            }
        }
        
        /**
         * items 表层事件清洗 
         */
        private function disposeItems():void{
            while(_tweenStack.length > 0){
                var t:Tween = _tweenStack.pop();
                if(t){
                    t.complete();
                    t = null; 
                }
            }
            
            if(_items && _items.length>0){
                for (var i:int = 0; i < _items.length; i++) {
                    var item:Sprite = _items[i] as Sprite;
                    if (item == null) {
                        break;
                    }
                    Laya.timer.clearAll(item);
                    Tween.clearAll(item);
                }
            }
        }
        
        /**@inheritDoc */
        override public function destroy(destroyChild:Boolean = true):void {
            this.disposeItems();
            super.destroy(destroyChild);
        }

2.业务伪代码

viewStack业务

        private function addEvent():void
        {
            if(lui.viewStack.motionMode){
                lui.viewStack.on(Event.MOUSE_DOWN, this, onViewStackDown);
            }
        }
        
        private function onViewStackDown(e:Event = null):void
        {
            lui.viewStack.once(Event.MOUSE_UP, this, onViewStackUp, [e.stageX]);
            lui.viewStack.once(Event.MOUSE_OUT, this, onViewStackUp, [e.stageX]);
        }
        
        private function onViewStackUp(lastStageX:Number, e:Event = null):void
        {
            lui.viewStack.off(Event.MOUSE_UP, this, onViewStackUp);
            lui.viewStack.off(Event.MOUSE_OUT, this, onViewStackUp);
            
            var dirV:Number = lastStageX - e.stageX;
            if(dirV > 20)
            {
                if(lui.listTab.selectedIndex<lui.listTab.length-1)
                {
                    lui.listTab.selectedIndex += 1;                
                }
            }
            else if(dirV < -20)
            {
                if(lui.listTab.selectedIndex>0)
                {
                    lui.listTab.selectedIndex -= 1;                
                }
            }
        }
        
        private function delEvent():void
        {
            lui.viewStack.off(Event.MOUSE_DOWN, this, onViewStackDown);
        }

viewStack搭配tab

            lui.listTab.selectEnable = false;
            lui.listTab.selectHandler = Handler.create(this, listTabSelect, null, false);
            lui.listTab.selectedIndex = 1;

        private function listTabSelect(index:int):void
        {
            //动态加载
            if(!lui.viewStack.items[index])
            {
                var item:StageSelectContent = new StageSelectContent();
                lui.viewStack.addItem(item);
            }
            
            //切换页面
            var dat:* = lui.listTab.getItem(index);
            lui.viewStack.selectedIndex = index;
        }