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