时间戳

首页 > 解决方案 > Material UI (Scrollspy) - React - 使用标签在列表中移动并自动滚动到索引

javascript - Material UI (Scrollspy) - React - 使用标签在列表中移动并自动滚动到索引

问题描述

如果我有一个大的项目列表，每个项目都有一个类别，

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 和反应中实现这样的目标？总之，

  1. 滚动浏览具有类别并按类别排序的大型项目列表
  2. 从选项卡选择自动滚动到第一个列表位置类别
  3. 根据列表滚动位置自动选择选项卡

标签： javascriptreactjstypescripttabsmaterial-ui

解决方案

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

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

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

  1. 使用react-scrollspy
  2. 使用useScrollspy Hook（试试这个）

推荐阅读