移动端页面H5,在列表页,点击跳到详情页,再按浏览器的返回键,回到列表页,需要保持滚动条原位置。
过程:
1.一开始我还以为和PC端一样,因为之前有过经验,React需要依赖第三方插件,可以搜一些keep-alive
的插件,比如react-router-cache-route
,react-live-route
,这种需要webpack配置进去或者hack路由组件,其实原理就是用css的隐藏dom来代替模拟路由的卸载,css的dom隐藏,不会卸载销毁组件,也不会销毁组件中的state,还可以保留滚动条位置
移动端我一开始以为也需要这样,后来发现如果移动端跳转的时候用
window.open(xxxxx,"_self")
,这样子跳到详情页,然后按浏览器返回键,能自动保留滚动条位置,自动keep-alive
了,就一开始用的是history.push
没能成功保留,用window.open(xxxxx,"_self")
反而能在浏览器里缓存住,window.open(xxxxx,"_self")
实现的效果在PC端模拟的移动设备上无效,在移动真机上有效a标签的href 也有以上效果
原理: 移动端浏览器有 往返缓存
功能,现在的PC端chrome是移除了这个功能的,详见大佬文章 ,很详细https://github.com/LeuisKen/leuisken.github.io/issues/6
如果想禁用往返缓存功能,则