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

@author ixenos 2019-03-29

 

 

1.List翻页滚动方案

 1 /**
 2  * 计算下一页的起始索引, 不足时补足
 3  * @param direction  0 for pre, 1 for nex ， @author ixenos 2019-03-29
 4  */
 5 private function btnScrollControl(direction:int=0):void{
 6     if(direction==0){
 7         var minusResult:int = list.startIndex - list.repeatX;
 8         if(minusResult>=0){
 9             list.tweenTo(minusResult);
10         }else{
11             list.tweenTo(0);
12         }
13     }else if(direction==1){
14         var plusResult:int = list.startindex + list.repeatX;
15         if(plusResult<=list.array.length-1){
16             list.tweenTo(plusResult);
17         }else{
18             list.tweenTo(list.array.length-1);
19         }}
20 }

 

2.List滚动源码解析

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

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

2) tweenTo内部是对scrollBar进行tween

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

3) scrollBar之于List

 1 public function set scrollBar(value:ScrollBar):void {
 2     if (_scrollBar != value) {
 3         _scrollBar = value;
 4         if (value) {
 5             _isVertical = _scrollBar.isVertical;
 6             addChild(_scrollBar);
 7             _scrollBar.on(Event.CHANGE, this, onScrollBarChange);
 8         }
 9     }
10 }

 1 /**
 2  * @private
 3  * 滚动条的 <code>Event.CHANGE</code> 事件侦听处理函数。
 4  */
 5 protected function onScrollBarChange(e:Event = null):void {
 6     runCallLater(changeCells);
 7     var scrollValue:Number = _scrollBar.value;
 8     var lineX:int = (_isVertical ? this.repeatX : this.repeatY);
 9     var lineY:int = (_isVertical ? this.repeatY : this.repeatX);
10     var scrollLine:int = Math.floor(scrollValue / _cellSize);
11     
12     if (!cacheContent) {
13         var index:int = scrollLine * lineX;
14         var num:int = 0;
15         if (index > _startIndex) {
16             num = index - _startIndex;
17             var down:Boolean = true;
18             var toIndex:int = _startIndex + lineX * (lineY + 1);
19             _isMoved = true;
20         } else if (index < _startIndex) {
21             num = _startIndex - index;
22             down = false;
23             toIndex = _startIndex - 1;
24             _isMoved = true;
25         }
26         
27         for (var i:int = 0; i < num; i++) {
28             if (down) {
29                 var cell:Box = _cells.shift();
30                 _cells[_cells.length] = cell;
31                 var cellIndex:int = toIndex + i;
32             } else {
33                 cell = _cells.pop();
34                 _cells.unshift(cell);
35                 cellIndex = toIndex - i;
36             }
37             var pos:Number = Math.floor(cellIndex / lineX) * _cellSize;
38             _isVertical ? cell.y = pos : cell.x = pos;
39             renderItem(cell, cellIndex);
40         }
41         _startIndex = index;
42         changeSelectStatus();
43     } else {
44         num = (lineY + 1);
45         if (_createdLine - scrollLine < num) {
46             _createItems(_createdLine, lineX, _createdLine + num);
47             renderItems(_createdLine * lineX, 0);
48             _createdLine += num;
49         }
50     }
51     
52     var r:Rectangle = _content._style.scrollRect;
53     if (_isVertical) {
54         r.y = scrollValue - _offset.y;
55         r.x = -_offset.x;
56     } else {
57         r.y = -_offset.y;
58         r.x = scrollValue - _offset.x;
59     }
60     _content.scrollRect = r;
61 }