cocos creator制作遊戲前端tab欄
制作背景
建立一個單色精靈節點作為背景命名為
bg
，
size
調為640*1136
制作tab欄
建立一個空節點
tab_root
，并為其添加一個
Widget
元件令tab欄自适應向下對齊，若在上方的tab欄同理即可。
在tab_root節點下建立一個單色精靈節點作為tab欄的背景，命名為
bk
，并且
size
寬度設定為640,高和位置自行調整至合适參數，如下圖：
建立一個空節點
game
作為存放一個tab的資訊節點，位置Position參數自行調節，
size
調節為150*背景高，
game
節點下存放了圖示以及名位元組點
重複以上步驟建立出4個tab
坐标tab1(-240,xx)， tab2（-80,xx），tab3(80,xx) ，tab4(240,xx)。xx代表自行調節
為他們添加一個按鈕元件
Button
制作tab欄的内容
建立一個
content_root
空節點，這個負責存放對應tab欄下的節點内容
每一個内容包含一個
top
節點(挂一個
widget
元件使其與上方對齊，用于存放标題資訊)和
list
節點(存放内容資訊[通常用scrollview來存放清單按實際情況而定，list内可以自行加
layout
元件調整])
top内挂有單色節點
bk
作為背景,title為文字資訊
制作出4個對應tab欄的節點
代碼思路
通過點tab欄的按鈕讓對應的節點的
active
為true，其他為false,隐藏不對應的節點，顯示對應内容。
是以有一個主要制的代碼放到Canvas要取出button以及對應content
編寫代碼Home.js
cc.Class({
extends: cc.Component,
properties: {
tab_button:{
default:[],
type:cc.Button,
},
tab_content:{
default:[],
type:cc.Node,
}
},
onLoad () {
},
start () {
this.on_tab_button_click(null,"0");
},
disable_tab:function(index){
this.tab_button[index].interactable = true; //禁用
this.tab_content[index].active = false;
},
enable_tab:function(index){
this.tab_button[index].interactable = false;
this.tab_content[index].active = true;
},
on_tab_button_click:function(e,index){
index = parseInt(index);
for(var i = 0 ; i < this.tab_button.length;i++){
if(i == index){
this.enable_tab(i);
}
else{
this.disable_tab(i);
}
}
},
// update (dt) {},
});
将節點拖動到該元件中注意button放到button節點中，content放入content
在按鈕之中的CustomEventData中傳入0,1,2,3的數字，其對應你剛剛放入content的元件中的順序
檢驗效果
為了較好地調試效果，我調整了
list
節點的背景色，制作tab欄以及功能成功。