保持原先的滚动位置

news2024/9/30 23:23:18

场景:

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

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

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

    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)

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1537585.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

构建强大的API:Django中的REST框架探究与实践【第146篇—Django】

👽发现宝藏 前些天发现了一个巨牛的人工智能学习网站,通俗易懂,风趣幽默,忍不住分享一下给大家。【点击进入巨牛的人工智能学习网站】。 构建强大的API:Django中的REST框架探究与实践 在当今的Web开发中,构…

1. Java基础入门

1. Java基础入门 1.1 Java介绍(了解) 1.1.1 Java背景 Java是美国 sun 公司(Stanford University Network)在1995年推出的一门计算机高级编程语言。Java 之父:詹姆斯高斯林(James Gosling)。 2009年 sun公司被Oracle公司收购。Java公司图标…

#Linux(权限管理)

(一)发行版:Ubuntu16.04.7 (二)记录: (1) (2)-开头代表普通文件 划分为三组: rw- rw- r-- rw-: 文件拥有…

模拟B\S服务器(扩展知识点)

3.2 模拟B\S服务器(扩展知识点) 模拟网站服务器,使用浏览器访问自己编写的服务端程序,查看网页效果。 案例分析 准备页面数据,web文件夹。 复制到我们Module中,比如复制到day08中 我们模拟服务器端,ServerSocket类…

Linux课程____Samba文件共享服务

一、 Samba服务基础 SMB协议,服务消息块 CIFS协议,通用互联网文件系统 1.Samba 服务器的主要程序 smbd:提供对服务器中文件、打印资源的共享访问 nmbd:提供基于 NetBlOS 主机名称的解析 2.目录文件 /etc/samba/smb.conf 检查工具:test…

Java22重磅发布!!!!卷不动了,真的卷不动了。。。。

就在3月19日,Java22重磅发布。Java22新增了12项增强功能,其中包括七个预览特性和一个孵化器特性,这些功能都显著到足以引起JDK增强提案(JEPs)的关注。它们涵盖了Java语言、其API、性能以及JDK中包含的工具的改进。 真…

01-Spark的Local模式与应用开发入门

1 Spark 的 local 模式 Spark 运行模式之一,用于在本地机器上单机模拟分布式计算的环境。在 local 模式下,Spark 会使用单个 JVM 进程来模拟分布式集群行为,所有 Spark 组件(如 SparkContext、Executor 等)都运行在同…

@EnableConfigurationProperties注解使用

前言 当我们想把配置的内容,动态赋值到某个配置类上的时候,可以使用EnableConfigurationProperties ConfigurationProperties注解 代码准备 创建配置文件prop.properties nameada age18 email123qq.com 创建配置类 ComponentScan("com.test.pops") PropertySo…

nacos-config实现配置中心功能

快速开始 | Spring Cloud Alibaba 官方的demo照着做了一遍,走不通,报各种错误,所以自己搞一个。 jdk版本及安装 因为用的nacos是2022.0.0.0-RC2版本的,要求jdk为jdk21 Java Downloads | Oracle 下载并安装jdk21,重…

异步任务 - 1

Thread Runnable - run function Jdk - 1.5之后 Callable - 范型 其实就是方法的返回值 阻塞等待 线程池 异步非常多 内存是有限的 业务代码内 - 启动线程的方式都不能用 - 会导致资源耗尽 将所有的多线程异步任务都交给线程池进行 - 资源控制 高并发系统 - 线程池 整…

代码随想录算法训练营 DAY 17 | 110.平衡二叉树 257.二叉树的所有路径 404.左叶子之和

110.平衡二叉树 平衡二叉树的定义:任何节点的左右子树高度差绝对值不超过1 空树也是AVL! 确定遍历顺序: 求高度用后序,求深度用前序。(取决于需不需要从下往上返回结果) 先判断它是不是平衡二叉树 如果是就返回 如…

图论07-被包围的区域(Java)

7.被包围的区域 题目描述 给你一个 m x n 的矩阵 board ,由若干字符 X 和 O ,找到所有被 X 围绕的区域,并将这些区域里所有的 O 用 X 填充。 示例 1: 输入:board [["X","X","X",&qu…

【进程概念】进程状态以及僵尸进程(结合代码)

文章目录 进程状态实验观察进程的各个状态动态监视进程的脚本代码样本1:观察S(浅度睡眠)状态代码样本2:观察R(运行)状态发送kill -19 信号 观察T(暂停)状态:调试代码,观察t&#xff…

原型、原型链

如图: 判断对错: Q1:在JS 中 proto 和 constructor 属性是对象和函数都有的属性 prototype属性仅是函数对象所独有的。 由于JavaScript中一切皆对象,即函数对象也是一种对象,所以函数也拥有__proto__和constructor属性。 Q2:通过 proto 属性来连接对象…

MOSDANET

# in the figure refers to the first term of Equation 1 辅助信息 作者未提供代码

2024年【山东省安全员C证】免费试题及山东省安全员C证作业考试题库

题库来源:安全生产模拟考试一点通公众号小程序 山东省安全员C证免费试题根据新山东省安全员C证考试大纲要求,安全生产模拟考试一点通将山东省安全员C证模拟考试试题进行汇编,组成一套山东省安全员C证全真模拟考试试题,学员可通过…

Python中的环境管理与虚拟环境的使用【第148篇—虚拟环境】

👽发现宝藏 前些天发现了一个巨牛的人工智能学习网站,通俗易懂,风趣幽默,忍不住分享一下给大家。【点击进入巨牛的人工智能学习网站】。 Python中的环境管理与虚拟环境的使用 在Python开发中,环境管理是至关重要的一环…

【CKA模拟题】学会JSONPath,精准定位Pod信息!

题干 For this question, please set this context (In exam, diff cluster name) kubectl config use-context kubernetes-adminkubernetesyou have a script named pod-filter.sh . Update this script to include a command that filters and displays the label with the…

轻松去除视频号水印:高效下载无痕视频教程

短视频已经成为了我们获取知识、娱乐消遣的主要途径之一。而视频号作为一个新兴的短视频平台,凭借其丰富的内容和便捷的操作界面,吸引了大量用户的关注。然而,有时候我们想要保存自己喜欢的视频,却发现视频上带有水印,…

蓝桥杯2023省赛:蜗牛|DFS暴力、DP动态规划

题目链接: 1.蜗牛 - 蓝桥云课 (lanqiao.cn) 思路说明: 首先,考虑DFS暴力解:对于蜗牛来说,它出发的起点可能是: 1、Xi竹竿底部2、从上一根杆Xi-1传送门传送到的bi, 那么他有三种方式走&…