taro3实现多层级手风琴菜单
时间: 2023-08-15 13:17:41 浏览: 146
要实现多层级手风琴菜单,可以使用 Taro3 框架中的 `AtAccordion` 组件。下面是一个示例代码:
```
import { AtAccordion, AtList, AtListItem } from 'taro-ui';
import { useState } from 'react';
const data = [
{
title: '一级菜单1',
content: [
{ title: '二级菜单1-1', content: ['内容1', '内容2', '内容3'] },
{ title: '二级菜单1-2', content: ['内容4', '内容5', '内容6'] },
],
},
{
title: '一级菜单2',
content: [
{ title: '二级菜单2-1', content: ['内容7', '内容8', '内容9'] },
{ title: '二级菜单2-2', content: ['内容10', '内容11', '内容12'] },
],
},
];
function AccordionMenu() {
const [openIndexes, setOpenIndexes] = useState([]);
const handleClick = (index) => {
let newOpenIndexes = [...openIndexes];
if (newOpenIndexes.includes(index)) {
newOpenIndexes = newOpenIndexes.filter((i) => i !== index);
} else {
newOpenIndexes.push(index);
}
setOpenIndexes(newOpenIndexes);
};
return (
<View>
{data.map((item, index) => (
<AtAccordion
key={index}
title={item.title}
open={openIndexes.includes(index)}
onClick={() => handleClick(index)}
>
{item.content.map((subItem, subIndex) => (
<AtList key={subIndex}>
<AtListItem title={subItem.title} hasBorder={false} />
{subItem.content.map((contentItem, contentIndex) => (
<AtListItem key={contentIndex} title={contentItem} />
))}
</AtList>
))}
</AtAccordion>
))}
</View>
);
}
export default AccordionMenu;
```
这个示例代码中,我们首先定义了一个 `data` 数组,用来存储菜单的数据。每个菜单项包括 `title` 和 `content` 两个属性,其中 `title` 表示该菜单项的标题,`content` 表示该菜单项下的子菜单。
然后,我们使用 `useState` 定义了一个 `openIndexes` 状态,用来存储当前展开的菜单项的索引。在 `handleClick` 函数中,我们根据用户点击的菜单项的索引,来更新 `openIndexes` 状态。
最后,我们使用 `AtAccordion`、`AtList` 和 `AtListItem` 组件来实现菜单的展示。在 `AtAccordion` 组件中,我们根据 `openIndexes` 状态来判断该菜单项是否展开;在 `AtList` 组件中,我们展示了子菜单的标题和内容。
阅读全文