Laya組件ViewStack+Tab

版本：Laya2.2.0

參考：https://ldc2.layabox.com/doc/?nav=zh-ts-3-3-16

 

ViewStack+Tab常被用於游戲中

 

 

  創建ViewStack

 

 

 創建ViewStack的頁面，我這里用Scene創建了Page1.scene、Page2.scene、Page3.scene。

 

 

將3個頁面拖動到ViewStack下

 

 

設置ViewStack的selectIndex為0，表示默認選中第一頁

 

 

設置3個頁面name分別為item0，item1，item2，若不設置，則ViewStack不生效。

 

 

創建一個Tab

 

 

設置Tab的按鈕skin為comp/tab.png，labels為頁面1,頁面2,頁面3。 selectedIndex為0.

 

 

 

現在頁面是這樣子

 

 

設置Tab的var為tab， ViewStack的var為viewStack。在代碼里組合使用這兩個組件。

    public tab:Laya.Tab;
    public viewStack:Laya.ViewStack;

    onEnable(){
        this.tab.selectHandler = new Laya.Handler(this,this.onSelecte);
    }

    private onSelecte(index:number):void{
        this.viewStack.selectedIndex=index;
        console.log(index);   //當前頁面索引
        console.log(this.viewStack.selection); //當前選擇的項對象
    }

　　

實際效果

 

 

不同樣式的Tab按鈕

如果Tab的按鈕是不同樣式，可以將不同樣式按鈕拖入Tab下，並給按鈕name設置為item0，item1。

例如下圖中兩個按鈕不同的skin，拖入Tab下，並且命名為item0，item1即可。

 

 

 Tab的默認skin需要置空，因為item的skin，首先優先使用Tab的。Tab的為空，才會去使用Button的skin。