team2_jj/assets/scripts/core/page/PageView.ts

import { _decorator, Component, Toggle, ToggleContainer } from 'cc';
import { Tabbar } from '../ui/Tabbar';
import { Window } from '../ui/window/Window';
import { Page } from './Page';
const { ccclass, property } = _decorator;
/**
 * 多页面控制组件
 * @description 一个简单的多页面控制组件，需要给多选框设置onTabBar给本组件
 * @author 袁浩
 */
@ccclass('PageView')
export class PageView extends Component {
    @property({ tooltip: "页面列表", type: Page })
    public pages: Page[] = [];
    @property({ tooltip: "窗口参数是否可以改变页面索引" })
    public useWindowParam = true;
    @property({ tooltip: "页签", type: [Tabbar] })
    public tabbars: Tabbar[] = [];
    @property({ tooltip: "页签", type: [ToggleContainer] })
    public toggleContainer: ToggleContainer;
    private _selectedIndex = 0;
    public set selectedIndex(value: number) {
        if (this.selectedIndex != value) {
            this._selectedIndex = value;
            this.setSelectedIndex()
        }
    }
    public get selectedIndex() {
        return this._selectedIndex;
    }
    start() {
        let _window = this.getComponent(Window);
        if (_window && _window.params) {
            this._selectedIndex = parseInt(_window.params[0]) || 0;
        }
        this.setSelectedIndex();
    }
    onTabBar(toggle: Toggle) {
        let items = toggle._toggleContainer.toggleItems;
        let index = items.indexOf(toggle);
        if (index != this.selectedIndex) {
            this.selectedIndex = index;
        }
    }
    protected setSelectedIndex() {
        for (let i = 0; i < this.pages.length; i++) {
            const page = this.pages[i];
            if (this.selectedIndex == i) {
                page.show(this);
                this.toggleContainer && (this.toggleContainer.toggleItems[i].isChecked = true);
                this.tabbars[i] && (this.tabbars[i].isChecked = true);
            }
            else {
                page.hide(this);
            }
        }
    }
}