如果我有一个很大的项目列表,每个项目都有一个类别,const categories: string[] = [0, 1, 2, 3, 4, 5];const items: {name: string, category: number}[] = [{name: "foo", category: 1}, {name: "bar", category: 1}, {name: "foobar", category: 2}, {name: "barfoo", category: 3}, ... etc.];..在 material-ui 中,它们被用作类别的选项卡标题: <AppBar> <Tabs value={tabIndex} onChange={handleChange} indicatorColor="secondary" variant="scrollable" scrollButtons="auto" > {categories.map((i) => ( <Tab key={i} label={i} /> ))} </Tabs> </AppBar>然后我在选项卡标题下有一长串项目,这些项目按类别分类在一起。我如何使用选项卡通过自动滚动到基于所选选项卡的位置中的第一个类别以及在滚动到列表中的特定第一个索引时自动更新选项卡位置来按顺序浏览列表。对于一个视觉示例:使用制表符在需要按特定顺序阅读的连续内容中移动的示例图像我怎样才能在材料 ui 和反应中实现这样的东西?总之,滚动浏览具有类别并按类别排序的大量项目从选项卡选择自动滚动到第一个列表位置类别根据列表滚动位置自动选择标签
2 回答
绝地无双
TA贡献1946条经验 获得超4个赞
您正在寻找的组件是Scrollspy,它是材料 ui 的未来组件。
目前,他们在材料 ui 文档中实现了名为AppTableOfContents 的组件。如果您在右侧的文档中看到内容部分。
https://github.com/mui-org/material-ui/issues/16359 在这里我找到了两个解决方案
使用反应滚动间谍
使用useScrollspy Hook(试试这个)
添加回答
举报
0/150
提交
取消