tab切换

192 阅读1分钟

tab进行切换的时候,每一部分对应的内容也要相应的展示出来,首先准备相应的数据,antd-moblie中的Tabs

1.准备数据

        tabs: [
            { title: "小红", key: "小红", isFollow: true },
            { title: "小绿", key: "小绿", isFollow: false },
            { title: "小粉", key: "小粉", isFollow: false },
            { title: "小橙", key: "小橙", isFollow: false },
        ],
        menus: [
            { key: '小红', des: ['a', 'b', 'c'] },
            { key: '小橙', des: ['d', 'e', 'f', 'g', 'h'] },
            { key: '小绿', des: ['i', 'j', 'k', 'l'] },
            { key: '小粉', des: ['i', 'o', 'p', 'q'] },
        ]
    }

2.数据展示

   render() {
        return (
            <div>
                <div>
                    {this.choose_list()}
                </div>
            </div>
        )
    }
    choose_list = () => {
        const { tabs } = this.state
        return (
            <div>
                <div className="market-page">
                    {/* 第一行菜单 */}
                    <Tabs
                        tabs={tabs}
                        onChange={(item, index) => {
                            this.updataMenus(item.title);
                        }}
                    >
                        <div>
                            {this.table()}
                        </div>
                    </Tabs>
                </div>
            </div>
        )
    }

3.每次切换菜单的时候将开关打开,准备数据的时候首先默认将第一个的开关打开

updataMenus = (title) => {
        let tabs = JSON.parse(JSON.stringify(this.state.tabs))
        for (let item of tabs) {
            item.isFollow = false
        }
        for (let item of tabs) {
            if (item.title === title) {
                item.isFollow = true
            }
        }

        this.setState({
            tabs
        }, () => { console.log(tabs) })

    }

4.首先判断开关有没有打开,如果打开,遍历menus,如果此时打开开关的key和menus中的key一样,展示相对应的数据

  table = () => {
        const { menus, tabs } = this.state
        return (
            <div>
                {
                    tabs.map((item) => {
                        if (item.isFollow) {
                            return (
                                <div>
                                    {menus.map((menusItem) => {
                                        if (menusItem.key === item.title) {
                                            return (
                                                <div>
                                                    {menusItem.des}
                                                </div>
                                            )
                                        }

                                    })}
                                </div>
                            )

                        }
                    })
                }
            </div>
        )

    }

一开始return出来的div总是不显示,后来发现可以通过每次if完之后直接return即可展示