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即可展示