路由堆栈管理不能记住滚动条的位置 about mobile-web-best-practice

[mcuking]

上周一直忙于公司业务，这么晚回复实在抱歉。

问题是这样的，vue-page-stack 是基于 vue 的 keep-alive 特性，而 keep-alive 主要是保存上一个组件的实例。van-list 组件实例里并没有有关滚动距离的信息，因此恢复的时候自然没有记录上次滚动距离。

这次我替换成了基于 better-scroll 封装的列表组件，其中 Vue 实例中就已经记录了滚动距离，可在恢复的时候记住上次滚动距离。相关截图如下：

[mcuking]

如果不想使用 better-scroll，也可以把页面的滚动距离记录在 vuex 上（可把页面路由当成 key），当恢复缓存的页面时，可在 activated 周期中获取该页面上次的滚动距离，然后设置当前页面滚动距离。

[s-kuswin]

好的，谢谢，我两者都会试试的

[mcuking]

@s-kuswin 也可以使用 <router-view> 方式，即在列表页通过 <router-view> 加载详情页，这种方式可以确保俩个页面同时保活，而且也有路由栈，类似原生开发中一个页面覆盖另一个页面的方式。

现在已经切换到这种模式，具体代码可以参考里面的代码。