team2_nc/assets/Scripts/core/ui/Tabbar.ts

import { Component, EventHandler, Node, SystemEventType, _decorator } from "cc";
const { ccclass, property } = _decorator;
/**
 * 选项卡组件
 * @author 袁浩
 */
@ccclass("Tabbar")
export class Tabbar extends Component {
    @property({ tooltip: "选中后显示的节点", type: Node })
    public checkedNode: Node;
    @property({ tooltip: "未选中显示的节点", type: Node })
    public uncheckedNode: Node;
    @property({ tooltip: "分组" })
    public group: string = 'tabbar';
    @property({ visible: false })
    private _isChecked = false;
    @property({ tooltip: "是否选中" })
    public get isChecked(): boolean {
        return this._isChecked;
    }
    public set isChecked(value: boolean) {
        this._isChecked = value;
        this.checkedNode && (this.checkedNode.active = true);
        this.uncheckedNode && (this.uncheckedNode.active = false);
    }
    @property({ tooltip: "选中回调", type: EventHandler })
    public checkEvents: EventHandler[] = [];
    private static groupData: Map<string, Map<Tabbar, boolean>> = new Map<string, Map<Tabbar, boolean>>();
    start() {
        this.checkData.set(this, this.isChecked);
        this.uncheckedNode.on(SystemEventType.TOUCH_END, this.onUnChecked, this);
    }
    onDestroy() {
        this.checkData.delete(this);
    }
    get checkData() {
        let checkData = Tabbar.groupData.get(this.group);
        checkData = checkData || new Map<Tabbar, boolean>();
        Tabbar.groupData.set(this.group, checkData);
        return checkData;
    }
    private onUnChecked() {
        this.checkData.forEach((isChecked: boolean, tabbar: Tabbar) => {
            if (tabbar == this) {
                if (!this._isChecked && this.checkEvents) {
                    for (let i = 0; i < this.checkEvents.length; i++) {
                        this.checkEvents[i].emit([this]);
                    }
                }
                this._isChecked = true;
                this.checkedNode.active = true;
                this.uncheckedNode.active = false;
            }
            else {
                tabbar.checkedNode.active = false;
                tabbar.uncheckedNode.active = true;
                tabbar._isChecked = false;
            }
        });
    }
}