需求:
从具有水平和垂直滚动条的列表页面进入详细信息页面,返回时列表页面的活动栏返回到上一个位置。
难点:
1 .列表使用了antd的table组件。 滚动条是此table组件的一部分,您可以在浏览器返回时自己记录页面或文档滚动条,但不能记录某个元素的滚动条。
2 .数据读取。 每次进入列表页时都会重新读取数据。 列表的初始值为空,还必须动态读取标头。 因此,返回页面时,整个列表没有高度和宽度,因此设置初始滚动条的位置也没有效果。
解决方案:
1 .设置列表数据初始值
可以在本地保存与离开列表页面时加载的列表相关的数据,也可以将其放入redux中,以便在返回页面时直接获取值。 列表不会没有宽度。 在列表页初始化时,即构造器时,可以检索保存的数据并为其赋值。
2 .设置列表滚动条位置的初始值
检查列表页中渲染后的节点,找到与滚动条对应的元素,然后使用dom作为目标元素。
离开页面时记录滚动条的位置,并在生命周期didmount中操作dom以设置滚动条的初始位置。
#离开页面时,可以是componentWillUnmount,也可以是跳页前。
使用dom时,将本机js方法与ReactDom的ReactDom.FindDOMNode方法组合在一起。