next.js 回退页面时滑动到之前浏览位置

场景:当前项目是一个嵌在服务号里的H5  首页比较长  采用的技术栈是nextjs  

需求:要求从首页离开 跳转到其他页面的时候 重新回退到首页的时候 页面滑动到最近一次浏览的位置 包括记录当前位置 和tab栏的索引

技术实现:

(1)首先添加页面回退和加载事件  因为我需要在首页和课程列表页都要添加 所以这部分代码直接放到了app.js里面

(2)在要添加浏览位置的页面 存储当前scrolltop 我是直接放到localstorage里面(我因为有三个tab栏切换,需要保存tab的当前索引,所以直接存了一个对象)

tips:我这里的Router是引的next里自带的router,监听路由开始切换时触发的事件,next的路由相关事件  还有以下几个 (离开页面时记录当下位置,routeChangeStart是最准确的)

(3)最后一步就是判断页面回退到你原来的页面时,获取之前存在storage里的值

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。
禁止转载,如需转载请通过简信或评论联系作者。

推荐阅读更多精彩内容