需求:
从一个横向纵向都有滚动条的列表页进入详情页,返回时列表页的活动条恢复到之前到位置。
难点:
1.列表用的是antd的table组件,滚动条是这个table组件的,浏览器返回时自身可以记录页面即document的滚动条,但不能记录某一个元素的滚动条。
2.数据加载,每次进去列表页时数据都会重新加载,列表的初始值都为空,表头也需要动态加载,所以返回页面时,整个列表是没有高度和宽度的,所以即使设一个初始的滚动条位置也不会生效。
解决方案:
1.设置列表数据初值
在离开列表页时将加载列表相关的数据存储到本地,或者放到redux里,返回页面时可以直接取值,列表不会没有宽高。在列表页初始化时即constructor 时就可以将存下来的数据取出赋值。
2.设置列表滚动条位置初值
审查列表页渲染以后的节点,找到滚动条所对应的元素,并将其作为目标元素操作dom。
离开页面时记录滚动条的位置,在生命周期didmount 里操作dom设置滚动条的初始位置。
#离开页面时可以是componentWillUnmount或者是页面跳转前。
#操作dom时用原生js的方法和ReactDom得ReactDom.FindDOMNode方法结合。