前端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方法如下

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

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

相关文章

【C#算法实现】可见的山峰对数量

文章目录 前言一、题目要求二、算法设计及代码实现2.1 算法思想2.2 代码实现 前言 本文是【程序员代码面试指南(第二版)学习笔记】C#版算法实现系列之一,用C#实现了《程序员代码面试指南》(第二版)栈和队列中的可见的…

多线程(代码案例: 单例模式, 阻塞队列, 生产者消费者模型,定时器)

设计模式是什么 类似于棋谱一样的东西 计算机圈子里的大佬为了能让小菜鸡的代码不要写的太差 针对一些典型的场景, 给出了一些典型的解决方案 这样小菜鸡们可以根据这些方案(ACM里面叫板子, 象棋五子棋里叫棋谱, 咱这里叫 设计模式), 略加修改, 这样代码再差也差不到哪里去 … …

python基于flask共享单车管理系统 234if

快速发展的社会中,人们的生活水平都在提高,生活节奏也在逐渐加快。为了节省时间和提高工作效率,越来越多的人选择利用互联网进行线上打理各种事务,然后线上管理系统也就相继涌现。与此同时,人们开始接受方便的生活方式…

FFmepg--音频编码流程--pcm编码为aac

文章目录 基本概念流程apicode(核心部分) 基本概念 从本地⽂件读取PCM数据进⾏AAC格式编码,然后将编码后的AAC数据存储到本地⽂件。 PCM样本格式:未经压缩的⾳频采样数据裸流 参数: Sample Rate : 采样频率Sample Size : 量化位数Number o…

ASP.NET Core 8.0 WebApi 从零开始学习JWT登录认证

文章目录 前言相关链接Nuget选择知识补充JWT不是加密算法可逆加密和不可逆加密 普通Jwt(不推荐)项目环境Nuget 最小JWT测试在WebApi中简单使用简单使用运行结果 WebApi 授权,博客太老了,尝试失败 WebApi .net core 8.0 最新版Jwt …

unity报错出现Asset database transaction committed twice!

错误描述: 运行时报错 Assertion failed on expression: ‘m_ErrorCode MDB_MAP_RESIZED || !HasAbortingErrors()’Asset database transaction committed twice!Assertion failed on expression: ‘errors MDB_SUCCESS || errors MDB_NOTFOUND’ 解决办法&…

【iOS】ARC学习

文章目录 前言一、autorelease实现二、苹果的实现三、内存管理的思考方式__strong修饰符取得非自己生成并持有的对象__strong 修饰符的变量之间可以相互赋值类的成员变量也可以使用strong修饰 __weak修饰符循环引用 __unsafe_unretained修饰符什么时候使用__unsafe_unretained …

蓝桥杯前端Web赛道-输入搜索联想

蓝桥杯前端Web赛道-输入搜索联想 题目链接:1.输入搜索联想 - 蓝桥云课 (lanqiao.cn) 题目要求: 题目中还包含effect.gif 更详细的说明了需求 那么观察这道题需要做两件事情 把表头的每一个字母进行大写进行模糊查询 这里我们会用到几个js函数&#…

Python引入其他文件作为包

1.首先当我们写的代码,可能要被其他文件引用,那么在建文件夹的时候,记得选包 不是文件夹!(选第4个,不是第3个) 因为文件夹默认没有init 方法,不能导包... 如果已经是文件夹了&#…

ChatGPT赋能遥感研究:精准分析处理遥感影像数据,推动科研新突破

遥感技术主要通过卫星和飞机从远处观察和测量我们的环境,是理解和监测地球物理、化学和生物系统的基石。ChatGPT是由OpenAI开发的最先进的语言模型,在理解和生成人类语言方面表现出了非凡的能力。重点介绍ChatGPT在遥感中的应用,人工智能在解…

python flask服务如何注册到nacos

shigen坚持更新文章的博客写手,擅长Java、python、vue、shell等编程语言和各种应用程序、脚本的开发。记录成长,分享认知,留住感动。 个人IP:shigen 背景 shigen之前遇到了一个服务,需要结合nacos Spring security实现…

Ps 滤镜:中间值

Ps菜单:滤镜/杂色/中间值 Filter/Noise/Median 中间值 Median滤镜可用于减少或消除图像中的噪点和杂色,同时能较好地保留图像边缘和细节信息。 中间值滤镜通过计算一个像素周围一定区域内的像素值的中间值(即这些值的中位数)&…