3

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

4

3 回答 3

0

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

于 2015-04-16T10:28:24.973 回答
0

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

如果您无法缓存列表，您可以像这样在调用中提供自己的：scrollBehaviorRouter.create

var router = Router.create({
  routes: routes,
  scrollBehavior: YourScrollBehavior
});
于 2015-04-11T20:59:42.770 回答
0

您是否考虑过仅制作视图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}
]
于 2015-07-25T16:37:27.140 回答