为了账号安全,请及时绑定邮箱和手机立即绑定

Material UI - React - 使用选项卡在列表中移动并自动滚动到索引

Material UI - React - 使用选项卡在列表中移动并自动滚动到索引

哆啦的时光机 2023-03-18 16:18:59
如果我有一个很大的项目列表,每个项目都有一个类别,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 回答

?
慕尼黑5688855

TA贡献1848条经验 获得超2个赞

正确答案在上面,但还有这个 CodeSandbox 示例也可以使用。



查看完整回答
反对 回复 2023-03-18
?
绝地无双

TA贡献1946条经验 获得超4个赞

您正在寻找的组件是Scrollspy,它是材料 ui 的未来组件

目前,他们在材料 ui 文档中实现了名为AppTableOfContents 的组件。如果您在右侧的文档中看到内容部分。

https://github.com/mui-org/material-ui/issues/16359 在这里我找到了两个解决方案

  1. 使用反应滚动间谍

  2. 使用useScrollspy Hook(试试这个)


查看完整回答
反对 回复 2023-03-18
  • 2 回答
  • 0 关注
  • 82 浏览
慕课专栏
更多

添加回答

举报

0/150
提交
取消
意见反馈 帮助中心 APP下载
官方微信