tanqiu/assets/scripts/FourUI/NavBarController.ts

import { _decorator, Color, Component, Node, Sprite } from 'cc';
const { ccclass, property } = _decorator;

@ccclass('NavBarController')
export class NavBarController extends Component {
    @property({ type: [Node] }) panels: Node[] = [];      // 依次给 Main、Shop、Upgrade、Skill
    @property({ type: [Node] }) buttons: Node[] = [];     // 依次给 Battle、Shop、Upgrade、Skill
    private normalColor = new Color(255, 255, 255, 255);
    private activeColor = new Color(255, 0, 0, 255);      // 红色

    start () {
        // 默认打开 MainUI
        this.switchTo(0);
    }

    onBattleClick ()  { this.switchTo(0); }
    onShopClick ()    { this.switchTo(1); }
    onUpgradeClick () { this.switchTo(2); }
    onSkillClick ()   { this.switchTo(3); }

    private switchTo (index: number) {
        // 显示对应面板
        this.panels.forEach((p, i) => p.active = i === index);

        // 设置按钮颜色
        this.buttons.forEach((btn, i) => {
            const sp = btn.getComponent(Sprite);
            if (sp) sp.color = (i === index) ? this.activeColor : this.normalColor;
        });
    }
}