javascript - 如何使用无限列表项处理单击详细信息(并导航回列表)？

Question

我有一个显示项目的无限滚动当我单击一个项目时，它会打开详细信息页面当我回到无限滚动/列表页面时，我需要回到我刚刚点击的项目，而不是回到顶部我怎样才能做到这一点 ？

一些想法:我应该使用 anchor 链接或其他等效链接来选择我想返回的项目吗？我应该在列表顶部显示详细信息页面吗？

一些细节:无限卷轴分页，可接收上千项我正在使用 ReactJS

谢谢!

Answer 1

您可以使用 scrollIntoView功能，这正是你想要的。假设您的所有商品都由一个唯一 ID 标识:

呈现的 HTML

<div id="container">
  . . .
  <element id="1897">

  </element>
</div>

您的列表位于 http://localhost:3001/my_url/list。单击您的元素会将您带到以下地址:http://localhost:3001/mu_url/item/1897。

然后，在您的元素模型中，返回主页的链接应该如下所示:

item.jsx

<Link
  . . .
  to={{
    pathname: `/my_url/list?lastPosition=${this.state.id}`
  }}
>

请注意，我们在后退按钮上添加了一个URL 参数。如果此处不存在，请将 this.state.id 替换为对当前项目 ID 的引用。然后，在您的主要组件中，您可以添加以下内容:

container.jsx

import React from ‘react’;
. . .

class Container extends React.Component {
  constructor(props) {. . .}

  // React function that trigger once your component is mounted
  componentDidMount() {
    const url = new URL(window.location.href);
    const lastPosition = url.searchParams.get(‘lastPosition’);

    if (lastPosition && element) {
      const element = document.querySelector(`#${lastPosition}`);
      element.scrollIntoView();
    }
  }

  . . .

  render() {
    . . .
  }
}

因此，如果一个元素 id 作为 URL 参数给出，并且找到一个 id 与此参数匹配的元素，您的窗口将自动滚动到它。另外，这允许您将链接发送给其他人，而无需滚动来查找该项目。