在我们的红包拓客系统中有一个问题一直想解决却苦于寻找各种方案都不适用,不过今天这个问题终于有了突破性的解决方案。
在我们的系统中案例首页的活动列表项目是通过 mui 的 ajax 动态加载显示的,但是每当进入一个页面再返回到这个首页,页面就会重新开始加载,这导致一个问题,比如前面已经浏览加载到了第 5 页,当返回时又回到了第一页,这个体验非常不友好,想要实现的效果是进入一个下级页面后再返回能够像普通网页一样能够定位到上一次的浏览位置。
这个问题困扰了我很长时间,今天在开发其它项目的时候也遇到这个问题,就开始仔细的研究,目前终于解决了这个问题。
我的项目是使用 mui scroll 来实现页面的区域滚动的,我的方案是每当滚动操作时进行监听,实时的把当前的数据写入到 localStorage 进行保存,在返回这个页面时先进行判断,如果 localStorage 里面的数据不为空就先把 localStorage 里面的数据插入到页面。
这里面有一些细节上的问题,比如要确保第一次访问页面的时候进行刷新,我在研究的过程中使用了一些巧妙的方案,如果你也遇到类似的问题欢迎一起讨论。