react实现分页列表滚动到某一位置,点击跳转到详情页返回继续保持进入的位置

该博客介绍利用react-activation插件实现页面位置保持,并用redux更新数据。首先需安装react-activation插件,可参考指定链接。列表页引入相关组件,KeepAlive支持内部滚动,列表页用flex布局较好,还提及返回上一页清除缓存的方法。

原理:利用react-activation插件实现页面位置的保持,然后使用redux进行数据的更新
一、安装react-activation插件
怎么使用react-activation可以参考:

https://github.com/CJY0208/react-activation/blob/master/README_CN.md

二、列表页使用组件
页面内引入 import KeepAlive, { withAliveScope } from ‘react-activation’;

注意KeepAlive支持的是内部滚动,所以列表页用flex布局比较好

<KeepAlive name='keppAlive'>
   <>
       列表组件
   <>
 </KeepAlive> 

如何返回上一页页面我们想清除缓存则使用

 const { dropScope } = this.props;
 dropScope('keppAlive')

withAliveScope(Dashboard)

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值