保持原先的滚动位置

场景:

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

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

相关推荐
恋猫de小郭4 小时前
苹果 AirPods 协议,Android 也可以使用完整版 AirPods 能力
android·前端·flutter
IT_陈寒4 小时前
JavaScript的默认参数挖坑实录,我掉进去了
前端·人工智能·后端
kyriewen17 小时前
别再 console.log 了:5 个 Chrome DevTools 调试技巧,用过就回不去了
前端·javascript·面试
IT_陈寒18 小时前
Python搞不定字符串编码?这破玩意坑我两小时!
前端·人工智能·后端
DigitalOcean20 小时前
Laravel 开发者已在 DigitalOcean 上开通超过 10 万台服务器
前端·laravel
星始流年20 小时前
从 Tool 到 Skill——基于 LangChain 的服务端Skill实现
前端·langchain·agent
李惟20 小时前
开源本地通信库,纯客户端 RPC,像聊天一样通信
前端
YAwu1120 小时前
深入解析 React 炫彩鼠标跟随标题组件:从坐标定位到动画性能
前端·react.js
GuWenyue20 小时前
排序效率低?5分钟吃透快速排序,性能飙升至O(nlogn)
前端·javascript·面试
OpenTiny社区20 小时前
🎨 看完 GenUI SDK 源码我悟了!
前端·vue.js·github