为了账号安全,请及时绑定邮箱和手机立即绑定

react 滚动分页列表点击进入详细,然后点击回退按钮,怎么能使回来的页面保持离开前的位置和状态?

react 滚动分页列表点击进入详细,然后点击回退按钮,怎么能使回来的页面保持离开前的位置和状态?

慕莱坞森 2019-05-11 16:23:29
问题描述在(A)页面原来的列表页面向下滚动滚动到第二页,点击列表跳转到详细(B)页面,在(B)页面点击返回按钮执行this.props.history.goBack()返回到想一个页面,无法回显到(A)页面的位置和数据。问题分析:this.props.history.goBack()返回之前的页面会重新调用组件渲染流程,这个和浏览器原生的window.history.back(-1)不一样。期待的结果目前react有没有出插件可以模拟window.history.back(-1)的返回或者解决方案?
查看完整描述

2 回答

?
qq_花开花谢_0

TA贡献1835条经验 获得超7个赞

其实现在的谷歌浏览器返回时可以记录之前滚动的位置的,但是可能兼容性比较差(你可以试试思否从列表页跳转到详情页,再返回)
如果需要更通用的方法,可以使用react-keeper来代替react-router,他可以返回的时候记录之前的位置
原理其实很简单,当你跳转的时候,那个列表页面是被隐藏了display:none,返回的时候再显示,根本不会重新渲染,所以滚动条也还在原来的位置
                            
查看完整回答
反对 回复 2019-05-11
  • 2 回答
  • 0 关注
  • 1579 浏览
慕课专栏
更多

添加回答

举报

0/150
提交
取消
微信客服

购课补贴
联系客服咨询优惠详情

帮助反馈 APP下载

慕课网APP
您的移动学习伙伴

公众号

扫描二维码
关注慕课网微信公众号