前端vue3-手动设置滚动条位置/自动定位

从B页面进行xx操作后需要跳转到A页面,并定位到AA职位,上图为A页面。

A页面的左侧是div,内层包裹List组件

给div定义ref=leftRef,在代码中写如下:

  function scrollTop() {if (leftRef.value) {console.log('99', leftRef.value);nextTick(() => {leftRef.value.scrollTop = 1000;// scrollBy(0, document.body.scrollWidth);});}}onMounted(async () => {if (router.currentRoute.value.query.id) {positionChooseCode.value = router.currentRoute.value.query.id;positionStatusValue.value = router.currentRoute.value.query.id;}const positionId = router.currentRoute.value.query.positionId;if (!!positionId) {cStore.setPositionId(positionId);}console.log('mounted--positionId', positionId);await getPositionDictionary(positionChooseCode.value, '');await getDictionaries();scrollTop();});

第一,需要等待数据渲染完成后,再调用scrollTop,设置scrollTop=1000,这样页面初始化滚动条位置会改变。

第二,找到当前职位的高度,也要等职位列表数据渲染完成后,获取

    console.log('positionList.value', positionList.value);rowItemId.value = item.id;//找到前面有多少个元素let index = positionList.value.findIndex((it) => it.id === rowItemId.value);console.log('找到前面有多少个元素', index + 1);num.value = index - 2;获取当前职位,当前职位会有class==red的,通过class获取ele;const sortableEles = document.querySelectorAll('.red');console.log(sortableEles);let itemHeight = 0;if (sortableEles.length > 0) {const firstListItem = sortableEles[0];itemHeight = firstListItem.offsetHeight; // 获取元素的高度,包括内边距和边框console.log('第一个列表项的高度:', itemHeight);console.log(' num.value', num.value);}

完整的scrollTop方法如下

总结:

滚动条要滚动起来
选中含有滚动条的元素,定义一个const leftRef = ref(null),在数据加载完成后设置leftRef.value.scrollTop

滚动条的位置
等待数据加载完后获取当前选中的元素,通过.offsetHeight获取元素的高度

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

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

相关文章

0基础 三个月掌握C语言(13)

数据在内存中的存储 整数在内存中的存储 在讲解操作符时 我们就已经学习了该部分的内容 这里我们回顾一下 整数的二进制表示方法有三种:原码 反码 补码 有符号的整数(unsigned) 三种表达方式均有符号位和数值位两部分 最高位的一位被当…

文件包含漏洞之包含SESSION(CTF题目)

这次使用的环境是ubuntunginxphpmysql 首先四个文件源码在以下链接中: 一道CTF题:PHP文件包含 | Chybeta 我们注册一个用户名111密码111,然后登录查看cookie和linux的session,因为我们的de服务器 是手动搭建的,所以…

Java IO模型

NIO Java IO 模型1. 什么是IO计算机结构角度应用程序角度 2. 常见的内存模型3. Java中常见的IO模型3.1 BIO(Blocking I/O)3.2 NIO(Non-blocking/New I/O)同步非阻塞 IO 模型I/O 多路复用模型 3.3 AIO(Asynchronous I/O…

Spring6.1新特性,四种方式调用REST接口(RestClient、WebClient、RestTemplate、HTTP Interface)

个人博客:无奈何杨(wnhyang) 个人语雀:wnhyang 共享语雀:在线知识共享 Github:wnhyang - Overview 官网 REST Clients :: Spring Framework The Spring Framework provides the following choices for…

电子元器件批发采购中的供应链透明度与可追溯性

电子元器件批发采购中的供应链透明度与可追溯性是非常重要的,特别是考虑到供应链的复杂性和全球化。以下是一些关于如何增强供应链透明度和可追溯性的建议: 供应商审核与选择:对潜在的供应商进行全面的审核和评估,了解其供应链结构…

【Leetcode】1793. 好子数组的最大分数

文章目录 题目思路代码复杂度分析时间复杂度空间复杂度 结果总结 题目 题目链接🔗 给你一个整数数组 n u m s nums nums (下标从 0 0 0 开始)和一个整数 k k k 。 一个子数组 ( i , j ) (i, j) (i,j) 的 分数 定义为 m i n ( n u m s …

ROS2从入门到精通0-3:VSCode 搭建 ROS2 工程环境

目录 0 专栏介绍1 Ubuntu下安装VSCode1.1 基本安装1.2 将VSCode添加到侧边栏 2 VSCode集成相关插件3 VSCode运行ROS2环境步骤3.1 安装编译依赖项3.2 创建工作空间和源码空间3.3 启动VSCode与配置 4 测试工程环境4.1 C版本4.2 Python版本 0 专栏介绍 本专栏旨在通过对ROS2的系统…

一、初识 web3

瑾以此系列文章,献给那些出于好奇并且想要学习这方面知识的开发者们 在多数时间里,我们对 web3 的理解是非常模糊的 就好比提及什么是 web1 以及 web2,相关概念的解释是: 1. 从 Web3 的开始 Web3,也被称为Web3.0&…

idea error java:compilation failed:internal java compiler error

idea中编译运行maven项目报错如下 idea error java:compilation failed:internal java compiler error 尝试如下操作 注意:jdk8 需要设置4个地方 1.首先打开File->Project Structure中的Project,将SDK和language level都设置一致,如下…

基于Java的考研专业课程管理系统(Vue.js+SpringBoot)

目录 一、摘要1.1 项目介绍1.2 项目录屏 二、功能模块2.1 数据中心模块2.2 考研高校模块2.3 高校教师管理模块2.4 考研专业模块2.5 考研政策模块 三、系统设计3.1 用例设计3.2 数据库设计3.2.1 考研高校表3.2.2 高校教师表3.2.3 考研专业表3.2.4 考研政策表 四、系统展示五、核…

文件操作:文本文件(写/读)

文件操作可以将数据永久化&#xff0c;C中对文件操作需要包含头文件 < fstream > 文件类型分为两种&#xff1a; 1. 文本文件&#xff1a;文件以文本的ASCII码形式存储在计算机中 2. 二进制文件&#xff1a;文件以文本的二进制形式存储在计算机中&#xff0c;…

matplotlib绘制统计特征图和分布特征图

文章目录 一、统计特征图绘制1.需求2.代码方法一方法二总结 二、分布特征图绘制1.需求2.代码 一、统计特征图绘制 1.需求 我现在有两个数据集Pdata和Cdata分别在DataFrame对象中&#xff0c;我现在想对这两个数据集进行统计特征分析&#xff0c;并用直方图展示出来。 2.代码…

CSS学习(3)-浮动和定位

一、浮动 1. 元素浮动后的特点 脱离文档流。不管浮动前是什么元素&#xff0c;浮动后&#xff1a;默认宽与高都是被内容撑开&#xff08;尽可能小&#xff09;&#xff0c;而且可以设置宽 高。不会独占一行&#xff0c;可以与其他元素共用一行。不会 margin 合并&#xff0c;…

护眼大路灯好不好用?中国路灯排行榜

护眼大路灯好不好用&#xff1f;关于这个问题一直有争议&#xff0c;一部分人觉得大路灯不好用&#xff0c;而且会增加支出&#xff0c;绝大多数人则认为大路灯特别好用&#xff0c;之所以会有不同的看法&#xff0c;小编觉得&#xff0c;还是大家使用的大路灯不同&#xff0c;…

[C语言]——函数递归

目录 一.什么是递归 1.递归的思想&#xff1a; 二.递归的限制条件 三.递归举例 1.举例1&#xff1a;求n的阶乘 1.1分析和代码实现 1.2画图推演 2.举例2&#xff1a;顺序打印⼀个整数的每⼀位 2.1分析和代码实现 2.2画图推演 四.递归与迭代 1.举例3&#xff1a;求第…

分页多线程处理大批量数据

1.业务场景 因为需要从一个返利明细表中获取大量的数据&#xff0c;生成返利报告&#xff0c;耗时相对较久&#xff0c;作为后台任务执行。但是后台任务如果不用多线程处理&#xff0c;也会要很长时间才能处理完。 另外考虑到数据量大&#xff0c;不能一次查询所有数据在内存…

ROS建模:从零手写机械臂的URDF模型

上一篇博客为【ROS建模&#xff1a;一起从零手写URDF模型】&#xff1a; https://blog.csdn.net/qq_54900679/article/details/135726348?csdn_share_tail%7B%22type%22%3A%22blog%22%2C%22rType%22%3A%22article%22%2C%22rId%22%3A%22135726348%22%2C%22source%22%3A%22qq_5…

EMCC 13.5 完整安装详细版

参考文档&#xff1a; Cloud Control Basic Installation Guide 13.5Overview of the Enterprise Manager Proactive Patch Program (Doc ID 822485.1)Enterprise Manager Cloud Control Management Agent 13.5 Release Update (RU) 19 Bug List (Doc ID 2996590.1)13.5: How …

记录对NSIS的一些微调 实现Electron安装包美化

利洽科技-nsNiuniuSkinUI - NSIS 实现了electron 的安装包美化&#xff0c;免费&#xff0c;便捷。 下面我整理了一些关于它的微调&#xff0c;使其安装卸载更加简单快捷。 1. 默认展示安装路径部分 &#xff08;1&#xff09;将moreconfiginfo标签visible 设置为 true&#…

GEE遥感云大数据林业应用典型案例及GPT模型应用

近年来遥感技术得到了突飞猛进的发展&#xff0c;航天、航空、临近空间等多遥感平台不断增加&#xff0c;数据的空间、时间、光谱分辨率不断提高&#xff0c;数据量猛增&#xff0c;遥感数据已经越来越具有大数据特征。遥感大数据的出现为相关研究提供了前所未有的机遇&#xf…