uniapp获得某个元素的高度并移动到该高度【伸手党福利】

news2024/11/26 7:48:46

uniapp获得某个元素的高度并移动到该高度

<view class="scrolls">
...
</view>
//等view加载完了才取高度
						setTimeout(()=>{
							const query = uni.createSelectorQuery().in(this);
							query.select('.scrolls').boundingClientRect(data => {
							  console.log("得到布局位置信息" + JSON.stringify(data));
							  console.log("节点离页面顶部的距离为" + data.top);
							  console.log("节点离页面顶部的距离为" + data.height);
							  this.viewHeight =  data.height
							}).exec();
							
						},1000)


					uni.pageScrollTo({
					   scrollTop: this.viewHeight*check/100,
					   duration: 200,
					})



效果:

在这里插入图片描述

参考资料

https://uniapp.dcloud.net.cn/api/ui/nodes-info.html#nodesrefboundingclientrect

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

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

相关文章

20221207英语学习

今日新词&#xff1a; work v.劳动, 干活; 工作; 起作用, 奏效; 运行 mentality n.〈常贬〉心态&#xff0c;心性&#xff1b;思想方法 copyright n.版权, 著作权 turkey n.火鸡&#xff1b;火鸡肉&#xff1b;&#xff08;Turkey&#xff09;土耳其 best-selling adj.最畅…

知识图谱-生物信息学-医学顶刊论文(Briefings in Bioinformatics-2022):基于异构图GCN和GAT的DTI预测

(2022.4.16)Briefings-DTI-HETA&#xff1a;基于异构图GCN和GAT的DTI预测 目录 (2022.4.16)Briefings-DTI-HETA&#xff1a;基于异构图GCN和GAT的DTI预测 摘要1.引言2.模型方法 2.1 定义3.1 异构图上的GCN3.2 图注意机制3.3 链接预测 4.实验 4.1 案例分析 论文题目&#xff1…

【圣诞节限定】教你用Python画圣诞树,做个浪漫的程序员

最近在各大社交平台看到好多圣诞树&#xff0c;看到大佬们画的圣诞树一个比一个精致&#xff0c;我也特别想尝试画一棵特别的圣诞树。下面是我画的一棵简易的圣诞树&#xff0c;虽然和网络上大佬们的圣诞树相比不是很精致&#xff0c;但是对于萌新们来说&#xff0c;画这样一棵…

Access denied for user ‘root‘ @‘123.233.244.218‘(using password:YES)的解决方法

大家好&#xff0c;我是雄雄&#xff0c;欢迎关注微信公众号&#xff1a;雄雄的小课堂。 前言 在我们新买了个服务器之后&#xff0c;数据库我觉得是比不可少的吧&#xff0c;任何一个项目&#xff0c;只要是动态的&#xff0c;都需要数据做数据的服务于支撑&#xff0c;目前我…

JUC并发编程第八篇,谈谈你对CAS的理解?自旋锁,CAS底层原理和存在的问题?

JUC并发编程第八篇&#xff0c;谈谈你对CAS的理解?自旋锁&#xff0c;CAS底层原理和存在的问题&#xff1f;一、CAS是什么&#xff1f;二、CAS的底层原理&#xff0c;如何理解UnSafe类&#xff1f;比较&#xff1a;i线程不安全&#xff0c;那 atomicInteger.getAndIncrement()…

笔记本电脑有必要分盘吗?电脑是分盘好还是不分盘好

电脑分区是指把电脑磁盘划分成多个磁盘分区&#xff0c;不同的磁盘分区用于存储相应类型的数据。许多用户新购置的电脑&#xff0c;打开一看&#xff0c;都会发现&#xff1a;“电脑只有一个C盘&#xff0c;没有其他的磁盘。那么&#xff0c;要不要对电脑分区呢&#xff1f;”笔…

共享车位|基于SpringBoot+vue+node共享车位平台的设计与实现

作者主页&#xff1a;编程千纸鹤 作者简介&#xff1a;Java、前端、Pythone开发多年&#xff0c;做过高程&#xff0c;项目经理&#xff0c;架构师 主要内容&#xff1a;Java项目开发、毕业设计开发、面试技术整理、最新技术分享 收藏点赞不迷路 关注作者有好处 文末获得源码 …

2022-12-6-Cmake工程转VS环境开发

新建工程后目录有 .vs 执行文件目录 x64 baseline.sln 首先新建一个目录&#xff0c;下面分为四个目录分别是dll&#xff0c;idl&#xff0c;include&#xff0c;lib 在include目录下面把所有Cmake工程中的include目录下的文件夹拷过来 在x64的debug下面把所有的dll动态库拷…

数据比较器,对比数据前后变化细节

前言 在开发的过程中&#xff0c;有时候需要对数据进行比对&#xff0c;来判断是否发生变化。如果一个字段一个字段比较&#xff0c;就太麻烦了。所以通过整合注解与反射的方式&#xff0c;实现一个通用的实体数据比较框架。 设计 使用注解&#xff0c;确定需要比较的属性。…

进程管理笔记

查看进程详情 命令&#xff1a;ps -aux 查看进程 能够观察所有系统的数据 命令&#xff1a;ps la | head -5 命令&#xff1a;ps axjf | head -20 仅查看自己的bash相关的进程 命令&#xff1a;ps l 观察系统所有进程 命令&#xff1a;ps aux 观察进程变化命令 - top …

微服务框架 SpringCloud微服务架构 21 RestClient 操作文档 21.3 更新文档

微服务框架 【SpringCloudRabbitMQDockerRedis搜索分布式&#xff0c;系统详解springcloud微服务技术栈课程|黑马程序员Java微服务】 SpringCloud微服务架构 文章目录微服务框架SpringCloud微服务架构21 RestClient 操作文档21.3 更新文档21.3.1 更新文档21 RestClient 操作文…

Python:函数进阶

目录 一、Python中的推导式 需求一 需求二 二、Python的全局作用域 三、Python的多参数传递 四、Python的装饰器 被装饰的方法不带参数 被装饰的方法带参数 带参数的装饰器 一、Python中的推导式 列表生成式是python内置的一种创建列表的方法&#xff0c;通过在[ ]内部执…

会话跟踪技术(Cookie和Session)

目录概述Cookie基本使用Cookie原理Cookie 存活时间Session基本使用Session原理Session使用细节Seesion 销毁&#xff1a;Cookie和Session的对比最后概述 会话&#xff1a; 用户打开浏览器&#xff0c;访问web服务器的资源&#xff0c;会话建立&#xff0c;直到有一方断开连接&…

Mac系统安装Kafka 3.x及可视化工具

写在前面&#xff1a;博主是一只经过实战开发历练后投身培训事业的“小山猪”&#xff0c;昵称取自动画片《狮子王》中的“彭彭”&#xff0c;总是以乐观、积极的心态对待周边的事物。本人的技术路线从Java全栈工程师一路奔向大数据开发、数据挖掘领域&#xff0c;如今终有小成…

网络工程师备考3章

注&#xff1a;本章考察较少&#xff0c;冲刺阶段可直接跳过 最常考点&#xff1a;帧中继&#xff0c;HDLC 3.1 公共交换电话网 英文&#xff1a;Public Switched Telephone Network ,PSTN 这种主网架构已经被淘汰了&#xff0c;现在的电话骨干网都是数字信号&#xff0c;目…

web课程设计网页规划与设计 基于HTML+CSS+JavaScript制作智能停车系统公司网站静态模板

&#x1f389;精彩专栏推荐 &#x1f4ad;文末获取联系 ✍️ 作者简介: 一个热爱把逻辑思维转变为代码的技术博主 &#x1f482; 作者主页: 【主页——&#x1f680;获取更多优质源码】 &#x1f393; web前端期末大作业&#xff1a; 【&#x1f4da;毕设项目精品实战案例 (10…

Java中三种I/O模型 BIO,NIO,AIO

UNIX 系统下&#xff0c; IO 模型一共有 5 种&#xff1a; 同步阻塞 I/O、同步非阻塞 I/O、I/O 多路复用、信号驱动 I/O 和异步 I/O。 这也是我们经常提到的 5 种 IO 模型 &#xff08;1&#xff09;同步阻塞I/O模型 应用程序发起read调用后&#xff0c;一直处于阻塞状态 内…

BP综述:自闭症中基于功能连接体的预测模型

自闭症是一种异质性的神经发育疾病&#xff0c;基于功能磁共振成像的研究有助于推进我们对其对大脑网络活动影响的理解。我们回顾了使用功能连接和症状的测量的预测建模如何帮助揭示对这种情况的关键见解。我们讨论了不同的预测框架如何进一步加深我们对复杂自闭症症状学基础的…

Word处理控件Aspose.Words功能演示:在 Python 中将 Word DOCX 或 DOC 转换为 PDF

Word 到PDF是最流行和执行最广泛的文档转换之一。DOCX或DOC文件在打印或共享之前会转换为 PDF 格式。在本文中&#xff0c;我们将在 Python 中自动将 Word 转换为 PDF。步骤和代码示例将演示如何使用 Python 将 Word DOCX 或 DOC 转换为 PDF。此外&#xff0c;您将了解自定义 W…

Stable Diffusion模型阅读笔记

Stable Diffusion模型 什么是Stable Diffusion模型 一般而言&#xff0c;扩散是在图像中反复添加小且随机的噪声。与之相反&#xff0c;Stable Diffusion模型是一种将噪声生成为图像的机器学习模型。经过训练&#xff0c;它可逐步对随机高斯噪声进行去噪以获得感兴趣的样本&a…