[cocos creator] Click the button to switch the interface

Click button to switch interface

import Util from "./Util";

const {
     ccclass, property } = cc._decorator;

@ccclass
export default class mainTab extends cc.Component {
    
    //gamelayer
    @property(cc.Node)
    gameLayer: cc.Node = null;
    // Button 
    @property([cc.Node])
    buttoms: cc.Node[] = [];
    // page 
    @property([cc.Prefab || cc.Node])
    pages: cc.Prefab[] | cc.Node[] = [];
    // The interface placed in the main interface by default 
    @property(cc.Node)
    public mainPage: cc.Node = null;

    _scenes: cc.Node[] = []
    _scenes_now: string = "";
    _lode_finish: boolean = false;
    public _couldTouch: boolean = false;

    onLoad(): void {
    
        this.loadScene();
        // EventMgr.listen(GameEventType.CHANGE_MAIN_SCENE, this.onChangeMainScene, this);
        for (let i = 0; i < this.buttoms.length; i++) {
    
            const element = this.buttoms[i];
            if (!this.pages[i]) {
    
                cc.error("mainTab--- Buttons do not correspond to the number of pages ");
                return;
            }
            Util.registerBtnEvent(element, this.changePage, this, this.pages[i].name, {
     isScale: false });
        }
        this.onSceneChange({
     pageName: this.mainPage.name });
    }

    loadScene() {
    
        let sceneName = "mainPage";
        this.loadScenes(sceneName, this.mainPage)
    }

    onChangeMainScene(data) {
    
        let index = this.pages.findIndex((item) => {
     return item.name == data.pageName })
        if (index == -1) {
    
            cc.error(" Switch failed ！ Page not loaded " + data.pageName);
            return;
        }
        this.onChangeCheck(data);
        this.onSceneChange(data);
    }

    onMainLoad() {
    
        this._couldTouch = true;
    }

    /** *  Page switching  * @param target * @param name * @returns */
    changePage(target: cc.Node, name: string) {
    
        if (!this._couldTouch) {
    
            return;
        }
        // cc.log(target, name);
        // EventMgr.trigger(GameEventType.CHANGE_MAIN_SCENE, { pageName: name });
        this.onChangeMainScene({
     pageName: name })
    }

    /** *  load tab scene  * @param SceneName * @param firstScene * @param cb */
    loadScenes(SceneName: string, firstScene: cc.Node, cb?) {
    
        this._lode_finish = false;
        this._scenes.push(firstScene);
        let js = Util.getScript(firstScene);
        if (js) js._init && js._init();
        firstScene.active = true;

        cc.resources.loadDir(SceneName, (e, res: cc.Prefab[]) => {
    
            if (e) {
    
                console.error(` load mainPage error `, e);
                return;
            }
            for (let i = 0; i < res.length; i++) {
    
                const element = res[i];
                if (element.name == firstScene.name) {
    
                    continue;
                }
                let index = this.pages.findIndex((item) => {
     return item.name == element.name })
                if (index == -1) {
    
                    cc.assetManager.releaseAsset(element);
                    continue;
                }
                let node: cc.Node = cc.instantiate(element);
                if (node) {
    
                    this._scenes.push(node);
                    node.active = false;
                    node.parent = this.gameLayer;
                    let js = Util.getScript(node);
                    if (js) cb && cb(js);
                }
            }
            this._lode_finish = true;
            this.onMainLoad()
        });
        this._scenes_now = firstScene.name;
    }


    // Before switching pages 
    onChangeCheck(data) {
    
        if (data.pageName == this._scenes_now || !this._lode_finish) return;
        // Page pull data 
        // if (data.pageName == "") {
    
        // }
        this.onChangePage(data);
    }

    onChangePage(data) {
    
        if (data.pageName == this._scenes_now || !this._lode_finish) return;
        this._scenes_now = data.pageName;
        for (let i = 0; i < this._scenes.length; i++) {
    
            const element = this._scenes[i];
            if (element.name == data.pageName) {
    
                element.active = true;
                let js = Util.getScript(element);
                if (js) js._init && js._init(data.data);
            }
            else {
    
                element.active = false;
            }
        }
    }

    onSceneChange(data) {
    
        this.buttoms.forEach(element => {
    
            let eventName = "";
            if (element.getComponent(cc.Button) && element.getComponent(cc.Button).clickEvents.length) {
    
                eventName = element.getComponent(cc.Button).clickEvents[0].customEventData;
            }
            // Selected button 
            if (eventName == data.pageName) {
    
                element.scale = 1;
                return;
            }
            // Unselected button 
            element.scale = 0.8;
        });
    }
    onDestroy() {
    
        // EventMgr.ignoreAll(this);
    }
}

demo download ：
https://download.csdn.net/download/K86338236/85836249