保持原先的滚动位置

场景:

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

方案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)

相关推荐
wearegogog1237 小时前
基于 MATLAB 的卡尔曼滤波器实现,用于消除噪声并估算信号
前端·算法·matlab
Drawing stars7 小时前
JAVA后端 前端 大模型应用 学习路线
java·前端·学习
品克缤8 小时前
Element UI MessageBox 增加第三个按钮(DOM Hack 方案)
前端·javascript·vue.js
小二·8 小时前
Python Web 开发进阶实战:性能压测与调优 —— Locust + Prometheus + Grafana 构建高并发可观测系统
前端·python·prometheus
小沐°8 小时前
vue-设置不同环境的打包和运行
前端·javascript·vue.js
Irene19918 小时前
Vue3 <Suspense> 使用指南与注意事项
vue.js·suspense
qq_419854059 小时前
CSS动效
前端·javascript·css
烛阴9 小时前
3D字体TextGeometry
前端·webgl·three.js
桜吹雪9 小时前
markstream-vue实战踩坑笔记
前端
C_心欲无痕9 小时前
nginx - 实现域名跳转的几种方式
运维·前端·nginx