保持原先的滚动位置

场景:

一个商品页面,一直滑 划到中间 然后点进去详情页面了 然后再返回 怎么让他保持在中间的位置

方案1:传商品id 做锚点定位

vue中实现锚点定位以及平滑滚动到指定位置_vue中锚点跳转和页面滚动锚点定位-CSDN博客

javascript 复制代码
    goAnchor(id) {
      var anchor = document.getElementById(id);
      // chrome
      document.body.scrollTop = anchor.offsetTop;
      // firefox
      document.documentElement.scrollTop = anchor.offsetTop;
      // safari
      window.pageYOffset = anchor.offsetTop;
    },
	方法二:
	 goAnchor(id) {
      var anchor = document.getElementById(id);
      anchor.scrollIntoView();
    },

方案2:

从详情页面跳转回来的时候 使用 this.$router.back 不刷新商品页面

方案3:使用keep-alive

vue组件缓存之keep-alive正确使用姿势 (zhihu.com)
vue使用keep-alive详解------实现数据缓存不刷新、修改值后刷新、相同参数区分等_keep-alive :include="cachedviews"方法切换页面如何让部分内容不刷新-CSDN博客

方案4:

滚动行为 | Vue Router (vuejs.org)

相关推荐
夜空孤狼啸4 分钟前
Vue Data UI:这不是图表库,是数据可视化 UI 平台
vue.js·ui·信息可视化
夜白宋9 分钟前
【Redis深入】二、高性能
java·前端·redis
被考核重击9 分钟前
前端高频面试题总结_性能_工程化_网络
前端·网络·性能优化·工程化
nnsix20 分钟前
Unity 自定义包的 package.json 简单写法
java·服务器·前端
书中枫叶27 分钟前
生活缴费充值系统
前端·javascript·经验分享·mongodb·node.js
weixin_4617694029 分钟前
npm 修改镜像源依赖下载缓慢运行报错日志解决
前端·npm·node.js
Soari30 分钟前
Hermes-webui:面向 Hermes Agent 的自托管 Web 控制台
前端·webui·agent ai·自托管ai
2501_912784081 小时前
跨境电商独立站的多语言架构设计:基于 Laravel + Vue.js 的实践
vue.js·php·laravel·跨境电商·taocarts
JustHappy10 小时前
古法编程秘籍(二):什么是代码模块化?别背概念,把房间收拾明白就够了
前端·后端