Question

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

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

一些细节：无限滚动页面，可以接收数千个项目我正在使用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与该参数匹配的元素，则窗口将自动滚动到该元素。另外，这使您可以将链接发送给其他人，而无需滚动即可找到该项目。

如何处理带有无限列表项的详细信息单击（并在列表上导航）？

1 个答案: