Laya List翻页滚动方案 & List滚动源码解析

Laya List翻页滚动方案 & List滚动源码解析

@author ixenos 2019-03-29

1.List翻页滚动方案

 /**
  * 计算下一页的起始索引, 不足时补足
  * @param direction  0 for pre, 1 for nex ， @author ixenos 2019-03-29
  */
 private function btnScrollControl(direction:int=0):void{
     if(direction==0){
         var minusResult:int = list.startIndex - list.repeatX;
         if(minusResult>=0){
             list.tweenTo(minusResult);
         }else{
             list.tweenTo(0);
         }
     }else if(direction==1){
         var plusResult:int = list.startindex + list.repeatX;
         if(plusResult<=list.array.length-1){
             list.tweenTo(plusResult);
         }else{
             list.tweenTo(list.array.length-1);
         }}
 }

2.List滚动源码解析

1) scrollTo和tweenTo都需要list本身自带滚动条

 /**
  * <p>滚动列表，以设定的数据索引对应的单元格为当前可视列表的第一项。</p>
  * @param index 单元格在数据列表中的索引。
  */
 public function scrollTo(index:int):void {
     if (_scrollBar) {
         var numX:int = _isVertical ? repeatX : repeatY;
         _scrollBar.value = Math.floor(index / numX) * _cellSize;
     } else {
         startIndex = index;
     }
 }

2) tweenTo内部是对scrollBar进行tween

 /**
  * <p>缓动滚动列表，以设定的数据索引对应的单元格为当前可视列表的第一项。</p>
  * @param index 单元格在数据列表中的索引。
  * @param time    缓动时间。
  * @param complete    缓动结束回掉
  */
 public function tweenTo(index:int, time:int = 200, complete:Handler = null):void {
     if (_scrollBar) {
         var numX:int = _isVertical ? repeatX : repeatY;
         Tween.to(_scrollBar, {value: Math.floor(index / numX) * _cellSize}, time, null, complete, 0, true);
     } else {
         startIndex = index;
         if (complete) complete.run();
     }
 }

3) scrollBar之于List

 public function set scrollBar(value:ScrollBar):void {
     if (_scrollBar != value) {
         _scrollBar = value;
         if (value) {
             _isVertical = _scrollBar.isVertical;
             addChild(_scrollBar);
             _scrollBar.on(Event.CHANGE, this, onScrollBarChange);
         }
     }
 }

 /**
  * @private
  * 滚动条的 <code>Event.CHANGE</code> 事件侦听处理函数。
  */
 protected function onScrollBarChange(e:Event = null):void {
     runCallLater(changeCells);
     var scrollValue:Number = _scrollBar.value;
     var lineX:int = (_isVertical ? this.repeatX : this.repeatY);
     var lineY:int = (_isVertical ? this.repeatY : this.repeatX);
     var scrollLine:int = Math.floor(scrollValue / _cellSize);

     if (!cacheContent) {
         var index:int = scrollLine * lineX;
         var num:int = 0;
         if (index > _startIndex) {
             num = index - _startIndex;
             var down:Boolean = true;
             var toIndex:int = _startIndex + lineX * (lineY + 1);
             _isMoved = true;
         } else if (index < _startIndex) {
             num = _startIndex - index;
             down = false;
             toIndex = _startIndex - 1;
             _isMoved = true;
         }

         for (var i:int = 0; i < num; i++) {
             if (down) {
                 var cell:Box = _cells.shift();
                 _cells[_cells.length] = cell;
                 var cellIndex:int = toIndex + i;
             } else {
                 cell = _cells.pop();
                 _cells.unshift(cell);
                 cellIndex = toIndex - i;
             }
             var pos:Number = Math.floor(cellIndex / lineX) * _cellSize;
             _isVertical ? cell.y = pos : cell.x = pos;
             renderItem(cell, cellIndex);
         }
         _startIndex = index;
         changeSelectStatus();
     } else {
         num = (lineY + 1);
         if (_createdLine - scrollLine < num) {
             _createItems(_createdLine, lineX, _createdLine + num);
             renderItems(_createdLine * lineX, 0);
             _createdLine += num;
         }
     }

     var r:Rectangle = _content._style.scrollRect;
     if (_isVertical) {
         r.y = scrollValue - _offset.y;
         r.x = -_offset.x;
     } else {
         r.y = -_offset.y;
         r.x = scrollValue - _offset.x;
     }
     _content.scrollRect = r;
 }