LayaAir之List
阿新 • • 發佈：2018-11-03
handler img ado 開始 scroll mar als space mage 註意 : 引擎選用的是LayaAir 2.0.0.bate4
一,前言 : 在List中加入ScrollBar是很簡單的 . 如下圖:
但是 , 這些滑動條不太簡潔 , 可能入不了你我的法眼.
①,傳統滑動條分4部分組成
我們放入Ui , 看看效果:
乘上 , 如想實現簡潔版的滑動條(其實只是需要一些簡單的功能). 可以完全使用Slider來做.如下 :
一,前言 : 在List中加入ScrollBar是很簡單的 . 如下圖:
但是 , 這些滑動條不太簡潔 , 可能入不了你我的法眼.
①,傳統滑動條分4部分組成
我們放入Ui , 看看效果:
乘上 , 如想實現簡潔版的滑動條(其實只是需要一些簡單的功能). 可以完全使用Slider來做.如下 :
二,關聯List和Slider
List的一般基礎設置:
this.con_list.itemRender = BallSkinRender; this.con_list.array = null; this.con_list.vScrollBarSkin = ""; this.con_list.scrollBar.elasticBackTime = 500; this.con_list.scrollBar.elasticDistance = 200; this.con_list.repeatX = 4; this.con_list.spaceX = 10; this.con_list.spaceY = 10; this.con_list.scrollBar.isVertical = true; this.con_list.scrollBar.setScroll( 0 , 100, 0 ); this.con_list.selectHandler = Laya.Handler.create(this , this._list_select , null , false); this.con_list.scrollBar.changeHandler = Laya.Handler.create( this , this._scroll_Change , null , false );
註解 :
① : 設置 this.con_list.vScrollBarSkin = ""; 才能設置回彈 , 進度等信息 . 比如 :this.con_list.scrollBar.changeHandler = Laya.Handler.create( this , this._scroll_Change , null , false );
我們可以偵聽到進度的信息.
② : this.con_list.scrollBar.setScroll( 0 , 100, 0 ); 參數 : 1 , 最小值 ; 2 , 最大值 ; 3 , 當前值
核心關聯:
/** * 選擇元素 * @param {number} $index 從0開始 * @private */ private _list_select( $index : number ) : void{ console.log(`AAACCC : ${$index}`); } private _scroll_Change( $value : number ) : void{ if( $value <= 0 ){ this.vs_bar.value = 0; }else if( $value >= this.con_list.scrollBar.max ){ this.vs_bar.value = 100; }else{ this.vs_bar.value = ( ($value * 1.0) / this.con_list.scrollBar.max ) * 100; } }
註解 : ① : vs_bar 即 Slider
② : _scroll_Change方法實現了關聯.(是Slider滑塊位置準確反映List拖動的進度).
LayaAir之List