react记录页面的滚动条位置

本文详细介绍了如何在React中使用Ant Design的Table组件时,解决从列表页跳转至详情页再返回时,列表页滚动条及数据状态的恢复问题。通过在离开页面时保存滚动条位置和列表数据至本地或Redux,再利用React生命周期函数重设滚动条位置,确保了用户体验的连续性。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

从数据较多的列表页进入详情页返回时,列表页恢复原来的状态。

需求:

从一个横向纵向都有滚动条的列表页进入详情页,返回时列表页的活动条恢复到之前到位置。

难点:

1.列表用的是antd的table组件,滚动条是这个table组件的,浏览器返回时自身可以记录页面即document的滚动条,但不能记录某一个元素的滚动条。

2.数据加载,每次进去列表页时数据都会重新加载,列表的初始值都为空,表头也需要动态加载,所以返回页面时,整个列表是没有高度和宽度的,所以即使设一个初始的滚动条位置也不会生效。

解决方案:

1. 设置列表数据初值

在离开列表页时将加载列表相关的数据存储到本地,或者放到redux里,返回页面时可以直接取值,列表不会没有宽高。在列表页初始化时即constructor 时就可以将存下来的数据取出赋值。

2.设置列表滚动条位置初值

审查列表页渲染以后的节点,找到滚动条所对应的元素,并将其作为目标元素操作dom。

离开页面时记录滚动条的位置,在生命周期didmount 里操作dom设置滚动条的初始位置。

离开页面时可以是componentWillUnmount或者是页面跳转前。

操作dom时用原生js的方法和ReactDom得ReactDom.FindDOMNode方法结合。

部分代码:

componentDidMount() {
    var Btn = document.getElementsByClassName('ant-table-body')[0]
    const scrollLeft = localDb.get('scrollLeft') || 0;
    const scrollTop = localDb.get('scrollTop') || 0;
    // 设置滚动条的位置
    ReactDOM.findDOMNode(Btn).scrollTo(scrollLeft, scrollTop);
    let params = {}
    const { initDate } = this.state
    params.beginDate = initDate[0]
    params.endDate = initDate[1]
    this.loadData(params)
}
componentWillUnmount() {
   // 通过审查元素找到滚动条的盒子元素类
    const scrollLeft = document.getElementsByClassName('ant-table-body')[0].scrollLeft;
    const scrollTop = document.getElementsByClassName('ant-table-body')[0].scrollTop;
    const {
      wid,
      checkedUUids,
      org,
      data,
      type
    } = this.state
    localDb.set('scrollLeft', scrollLeft);
    localDb.set('scrollTop', scrollTop);
}
复制代码

后记

今天一个朋友问我要怎么react后退不刷新时,我告诉他了我的这种实现方式,不难但是复杂。一直以来用vue开发的他,发出了这么一声感叹,然后告诉我vue只要在组件外包一层keep-alive就可以记录组件的状态了,呃真的真的是灰常简单啊。

转载于:https://juejin.im/post/5b80117bf265da432a6ae1dc

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值