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栏以及功能成功。