Question

我有一个路由处理程序，它从商店请求数据，然后映射该数据以呈现组件列表。我的问题是，当我导航到另一个页面然后返回时，滚动位置不会恢复，因为必须重新渲染组件。无论如何都要延迟设置滚动位置直到列表呈现，或者保留和恢复任何类型导航中渲染组件的状态？

Answer 1

如果可以，我会缓存你正在渲染的列表，然后后面/滚动应该不是问题。

如果您无法缓存该列表，可以supply scrollBehavior Router.create这样的var router = Router.create({ routes: routes, scrollBehavior: YourScrollBehavior });来电话：

{{1}}

Answer 2

您可以在组件上使用willTransitionTo处理程序来延迟路由转换，直到您从API异步获取数据。这样路由器就可以恢复正确的滚动条，因为组件会立即使用所有数据进行渲染。

Answer 3

您是否考虑过制作观看display: none？

使用id属性序列化所有<divs/>，并保留一个维护历史记录的数组display: none。

现在，当一个用户回到历史记录中时，访问该对象并再次显示旧的div。

此解决方案允许您再次避免重新呈现组件，并且它还使浏览器更快，因为display: none的DOM节点不会影响浏览器性能。

var divHistory = [
  {id: 'qwer', scrollPosition: 30},
  {id: 'poiu', scrollPosition: 102},
  {id: 'asdf', scrollPosition: 0},
  {id: 'lkj', scrollPosition: 0},
  {id: 'zxcv', scrollPosition: 4050}
]

恢复后退按钮上的滚动位置

3 个答案: