egret--添加滾動條

屏幕的尺寸總是有限的，當您的內容已經超出屏幕的范圍，該如何處理呢？在 PC 上瀏覽網頁的時候，我們是如何看到屏幕顯示不下的那些內容呢？沒錯，用滾動條。通過拉動滾動條，我們就能一點一點的看完整個網頁。這里就引入了一個概念：視口(ViewPort)，如下圖所示：

可以這樣理解：視口就是您的顯示器，內容可以在視口中滾動，這樣您就可以看到本來是隱藏的那些部分。在 PC上，我們用滾動條來控制內容滾動，在手機上就比較特殊了，我們是用手指的滑動，實現滾動條類似的效果。對於移動設備的瀏覽器來說，”滾動”是內置的功能，一個網頁不需要特殊設置就能使用這個功能。但對 Egret 來說，”滾動”卻是需要自己實現的，因為 Egret 一般情況下要禁用瀏覽器的滾動，以免對交互造成干擾。對於在Canvas上繪制的內容，”滾動”是需要自己去”虛擬實現”的。

用法:

var myScroller = new eui.Scroller();//創建一個滾動組
 //注意位置和尺寸的設置是在Scroller上面，而不是容器上面
myScroller.width = 200;
myScroller.height = 200;
//設置viewport
myScroller.viewport = group;
this.addChild(myScroller);

定位滾動位置

除了通過手指控制 Scroller , 我們通過代碼也可以獲取和控制滾動的位置

Scroller.viewport.scrollV  縱向滾動的位置
Scroller.viewport.scrollH  橫向滾動的位置

事例:

private scroller: eui.Scroller;
    constructor() {
        super();
        //創建一個列表
        var list = new eui.List();
        list.dataProvider = new eui.ArrayCollection([1, 2, 3, 4, 5]);
        //創建一個 Scroller
        var scroller = new eui.Scroller();
        scroller.height = 160;
        scroller.viewport = list;
        this.addChild(scroller);
        this.scroller = scroller;
        //創建一個按鈕，點擊后改變 Scroller 滾動的位置
        var btn = new eui.Button();
        btn.x = 200;
        this.addChild(btn);
        btn.addEventListener(egret.TouchEvent.TOUCH_TAP,this.moveScroller,this);
    }
    protected createChildren() {
        //初始化后改變滾動的位置
        this.scroller.viewport.validateNow();
        this.scroller.viewport.scrollV = 40;
    }
    private moveScroller():void{
        //點擊按鈕后改變滾動的位置
        var sc = this.scroller;
        sc.viewport.scrollV += 10;
        if ((sc.viewport.scrollV + sc.height) >= sc.viewport.contentHeight) {
          console.log("滾動到底部了");
        }
    }

上面代碼最后一段可以計算是否滾動到列表的底部

Scroller.viewport.scrollV 是滾動的距離，這個值是變化的
Scroller.height 是滾動區域的高度，這個值是固定的
Scroller.viewport.contentHeight 是滾動內容的高度，這個值是固定的

滾動條顯示策略

在 Egret Engine 3.0.3 優化了 Scroller 的體驗。當我們使用 Scroller 實現一些滾動區域的效果時，會發現右側有一個滾動條(ScrollBar)，默認是自動隱藏的。即當我們不滾動區域時時不會顯示該滾動條的。現在可以使用 ScrollBar （VScrollBar 和 HScrollBar） 的 autoVisibility屬性，設置是否自動隱藏該滾動條。具體是如下的策略：

默認的 autoVisibility 屬性為true,即自動隱藏的。當我們把 autoVisibility 的屬性設置為 false 時，是否顯示滾動條取決於 ScrollerBar 的 visible 屬性，當 visible 為 true 時始終顯示滾動條，為 false 時始終隱藏滾動條。比如下面的 EXML 設置永不顯示滾動條。

即:

//需要在scroller添加到舞台上面之后再訪問verticalScrollBar
scroller.verticalScrollBar.autoVisibility = false;
scroller.verticalScrollBar.visible = false;

 

停止滾動動畫

在 Egret Engine 3.0.2 優化了Scroller 的體驗，並新增了stopAnimation()方法，可以立即停止當前的滾動動畫。這里我們可以擴展上面的代碼，在moveScroller函數中加入停止動畫的方法。

private moveScroller(): void {
    //點擊按鈕后改變滾動的位置
    var sc = this.scroller;
    sc.viewport.scrollV += 10;
    if((sc.viewport.scrollV + sc.height) >= sc.viewport.contentHeight) {
        console.log("滾動到底部了");
    }
    //停止正在滾動的動畫
    sc.stopAnimation();
}