场景:当前项目是一个嵌在服务号里的H5 首页比较长 采用的技术栈是nextjs
需求:要求从首页离开 跳转到其他页面的时候 重新回退到首页的时候 页面滑动到最近一次浏览的位置 包括记录当前位置 和tab栏的索引
技术实现:
(1)首先添加页面回退和加载事件 因为我需要在首页和课程列表页都要添加 所以这部分代码直接放到了app.js里面
(2)在要添加浏览位置的页面 存储当前scrolltop 我是直接放到localstorage里面(我因为有三个tab栏切换,需要保存tab的当前索引,所以直接存了一个对象)
tips:我这里的Router是引的next里自带的router,监听路由开始切换时触发的事件,next的路由相关事件 还有以下几个 (离开页面时记录当下位置,routeChangeStart是最准确的)
(3)最后一步就是判断页面回退到你原来的页面时,获取之前存在storage里的值