vue在hash路由模式下实现点击定位滑动

背景:一般是使用锚点来实现dom的定位,但在hash模式下,这种方式不行,会刷新路由,没法实现dom定位的效果。

其实scrollIntoView就可以解决这个问题,scrollIntoView可以将调用它的元素滚动到浏览器窗口的可见区域。

代码实现:

<!--html模块-->
<div class="bottom-wrapper"><div class="left"><div @click="goToDom(item.value)" v-for="(item,index) in menuList" :key="index" class="menu-item"><span>{{item.name}}</span></div></div><div class="right"><div class="scroll-container"><div class="scroll-page" ref="modelA"><div class="head">模块1</div></div><div class="scroll-page" ref="modelB"><div class="head">模块2</div></div><div class="scroll-page" ref="modelC"><div class="head">模块3</div></div></div>
</div>
//关键方法
//跳转到指点的位置const goToDom = (refName) => {proxy.$refs[refName].scrollIntoView({block: 'start', behavior: 'smooth'});}
    .bottom-wrapper {display: flex;margin: 10px;scroll-behavior: smooth;height: calc(100% - 365px);.left {width: 150px;@include box-ht;display: flex;flex-direction: column;align-items: center;.menu-item {margin: 5px 0;border-bottom: 1px solid $theme-bg;padding-bottom: 5px;color: #000000;&:hover{cursor: pointer;}}}.right {margin-left: 10px;width: calc(100% - 150px);height: 100%;.scroll-container {/* 核心代码:缓慢滚动过渡 */scroll-behavior: smooth;display: block;height: 100%;overflow-y: scroll;}.scroll-page {position: relative;@include box-ht;margin: 10px 0;.head {font-weight: bold;border-bottom: 1px solid $theme-bg;padding-bottom: 5px;}}}}

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

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

相关文章

物联网网关和飞鸟物联平台如何助力其实现智能化升级,提升生产效率-天拓四方

随着工业4.0时代的到来&#xff0c;物联网技术逐渐成为推动工业转型升级的关键力量。物联网网关作为连接工业设备与网络的核心枢纽&#xff0c;在工业自动化、数据收集与分析等方面发挥着越来越重要的作用。本案例将围绕一家知名制造企业&#xff0c;展示物联网网关和飞鸟物联平…

vue中v-bind控制class和style

当使用v-bind指令控制class和style时&#xff0c;可以通过动态绑定的方式根据不同的条件来添加或移除class&#xff0c;以及改变元素的样式。 1. 控制class 通过v-bind:class可以动态绑定class属性。可以使用对象语法、数组语法或者计算属性来实现。 对象语法&#xff1a;使用…

关于ImportError: attempted relative import with no known parent package解决

问题 我的项目结构如下&#xff1a; my_project/ ├── utils/ │ ├── __init__.py │ └── config.py └── scripts/├── __init__.py└── train.py当我在train.py中 尝试导入config中的模块时&#xff0c;即 from ..utils.config import *&#xff0c;报错…

提升消费者满意度的五星售后服务认证

在当今竞争激烈的市场环境中&#xff0c;消费者满意度是企业取得成功的重要因素。五星售后服务认证作为一种权威性认证&#xff0c;可以显著提高消费者满意度&#xff0c;增强企业的竞争力。本文将从四个方面探讨五星售后服务认证如何提高消费者满意度。 五星售后服务认证是由国…

SpringCash

文章目录 简介引入依赖application.yml配置常用注解使用1. 启动类添加注解使用方法上添加注解 简介 Spring Cache是一个框架&#xff0c;实现了基于注解的缓存功能底层可以使用EHCache、Caffeine、Redis实现缓存。 注解一般放在Controller的方法上&#xff0c;CachePut 注解一…

高精度定位技术的必要性与实际应用

在当今社会&#xff0c;随着科技的飞速发展&#xff0c;高精度精准定位技术已成为一项不可或缺的基础技术&#xff0c;其应用范围涉及军事、航空、智能交通、无人驾驶、智慧城市建设等众多领域。高精度精准定位不仅为人们的日常生活带来极大便利&#xff0c;还对提升国家的科技…

鸿蒙轻内核A核源码分析系列六 MMU协处理器(1)

在前面系列分析虚实映射时&#xff0c;涉及到了一些MMU协处理器与相关的汇编代码没有深入讲解。本文来专门分析那些协处理器与汇编代码。 本文中所涉及的源码&#xff0c;以OpenHarmony LiteOS-A内核为例&#xff0c;均可以在开源站点 https://gitee.com/openharmony/kernel_l…

mysql性能优化知识点

MySQL性能优化是一个多方面的议题&#xff0c;涉及数据库设计、查询优化、服务器配置、索引管理等多个层面。 以下是一些关键的优化策略&#xff1a; 1、优化简介 使用SHOW STATUS语句查询一些MySQL数据库性能参数&#xff0c;格式如下&#xff1a; SHOW STATUS LIKE value;…

Presidents of America(1789-1860)

Presidents of America preface 美国总统&#xff0c;是美利坚合众国的国家元首、政府首脑与三军统帅&#xff0c;是当今世界权力最高的人。美国总统是根据1787年通过的美国宪法而设立&#xff0c;行使宪法赋予的行政权。截至目前&#xff0c;美国一共有过44位总统(45任&…

项目中的增删改查

1.增加&#xff1a; 接口定义&#xff1a;在Spring Boot的Controller&#xff08;控制层&#xff09;定义添加医院的接口&#xff0c;使用POST方法&#xff0c;并接收医院信息的JSON数据。数据校验&#xff1a;在接收到数据后&#xff0c;进行必要的数据校验&#xff0c;确保数…

运行mvn命令打包项目jar包报错?“Fatal error compiling: 无效的目标发行版: 19 ”, 让我来看看~

最近写实验&#xff0c;要打包项目&#xff0c;但是不管是在cmd运行“mvn clean package -Dmaven.test.skiptrue”命令&#xff0c;还是在idea上去操作&#xff0c;都出现了这样的一个错误&#xff1a; [EROR] Failed to exeoute goal org.apache.maven.plugins:maven-comnpile…

CCRC信息安全服务资质认证是什么

什么是CCRC认证&#xff1f; CCRC 全称 China Cybersecurity Review Technology and Certification Center。CCRC认证是指中国网络安全审查技术与认证中心进行的信息安全服务资质认证。简称信息安全服务资质认证。 CCRC&#xff0c;即中国网络安全审查技术与认证中心&#xff0…

倾斜摄影优化之重:轻量化

老子云倾斜摄影轻量化 1、支持全网多端流畅展示 2、支持私有化部署 3、一键轻量化G级模型 4、多种精度选择 5、支持二次开发 &#xff08;1&#xff09;、压缩可达98%以上 &#xff08;2&#xff09;、多种精度任选&#xff1a;普清、标清、高清、超清 &#xff08;3&am…

Illustrator 2024 mac/win版:创新设计,一触即发

Illustrator 2024是一款由Adobe公司开发的强大且全面的矢量图形设计软件&#xff0c;它以其卓越的性能和丰富的功能&#xff0c;为设计师们提供了一个高效、直观且富有创意的工作环境。 Illustrator 2024 mac/win版获取 作为一款矢量图形设计软件&#xff0c;Illustrator 2024…

linux shell查看24h内修改的文件

执行命令&#xff1a; find /path -type f -mtime 0

【电机】开环控制系统和闭环控制系统

1 什么是控制系统 控制系统是指由控制主体、控制客体和控制媒体组成的具有自身目标和功能的管理系统。也可以理解为&#xff1a;为了使控制对象达到预期的稳定状态。例如一个水箱的温度控制&#xff0c;可以通过控制加热设备输出的功率进而来改变水温达到目标温度&#xff0c;…

基于WPF技术的换热站智能监控系统09--封装水泵对象

1、添加用户控件 2、编写水泵UI 控件中用到了Viewbox控件&#xff0c;Viewbox控件是WPF中一个简单的缩放工具&#xff0c;它可以帮助你放大或缩小单个元素&#xff0c;同时保持其宽高比。通过样式和属性设置&#xff0c;你可以创建出既美观又功能丰富的用户界面。在实际开发中…

Ansible——yum模块

目录 参数总结 1. 安装软件包 安装单个软件包 安装多个软件包 从特定仓库安装 安装包并禁用 GPG 检查 简单的命令行帮助 2. 更新软件包 更新单个软件包到最新版本 更新所有可升级的软件包 3. 删除软件包 删除单个软件包 删除多个软件包 4. 安装特定版本的软件包…

Java使用swing实现简易计算器

效果如下 代码实现 import javax.swing.*; import java.awt.*; import java.awt.event.ActionEvent; import java.awt.event.ActionListener;public class SimpleCalculator {private JFrame frame;private JTextField numField1;private JTextField numField2;private JTex…

flink消费kafka时获取元数据信息

当flink消费kafka时&#xff0c;只需要简单配置就能使用并正常运行 val env StreamExecutionEnvironment.getExecutionEnvironmentval props new Properties()props.setProperty(ConsumerConfig.BOOTSTRAP_SERVERS_CONFIG, "192.168.0.30:9092")props.setProperty(…