微信小程序通过createSelectorQuery获取元素 高度,宽度与界面距离

小程序官方有提供给我们一个 const query = wx.createSelectorQuery() 函数
我们可以先编写这样一段代码
wxml

<view><button bindtap="getDom">点击查看</button><view class = "textIn" style = "height: 100px;width: 30px;">测试工具</view><view class = "textIn" style = "height: 300px;width: 50px;">测试工具</view><view class = "textIn" style = "height: 500px;width: 20px;">测试工具</view>
</view>

这里 我们定义了 多块 view 都用 行内样式设置了它的 高度和宽度
js编写代码如下

Page({data: {},onLoad(options) {},getDom() {const query = wx.createSelectorQuery()query.selectAll('.textIn').boundingClientRect();query.exec(function (res) {console.log(res);})}})

我们运行代码 并点击按钮 点击查看
这里 我们获取了所有 类名中包含 textIn 的元素 并输出
这里 就正常的输出了 每个元素 高度 宽度 与页面上下左右的距离
在这里插入图片描述

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

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

相关文章

基于KubeAdm搭建多节点K8S集群

基于KubeAdm搭建多节点K8S集群 1、基本流程&#xff08;注意 docker 版本和kubeadm、kubelet、kubectl的关系&#xff09;2、安装utils依赖&#xff08;安装范围&#xff1a;主节点工作节点&#xff09;3、安装docker &#xff08;安装范围&#xff1a;主节点工作节点&#xff…

数据输出流和数据输入流

数据输出流 package dataOutputSmTest;import java.io.DataOutputStream; import java.io.FileOutputStream; import java.io.OutputStream;public class dataOS {//掌握数据输出流public static void main(String[] args) {//创建一个数据输出流 包装低级的字节输出流try(Dat…

接口自动化测试yaml+requests+allure技术,你学会了吗?

前言 接口自动化测试是在软件开发过程中常用的一种测试方式&#xff0c;通过对接口进行自动化测试&#xff0c;可以提高测试效率、降低测试成本。在接口自动化测试中&#xff0c;yaml、requests和allure三种技术经常被使用。 一、什么是接口自动化测试 接口自动化测试是指通…

【C++】哈希的应用 —— 布隆过滤器

​ ​&#x1f4dd;个人主页&#xff1a;Sherry的成长之路 &#x1f3e0;学习社区&#xff1a;Sherry的成长之路&#xff08;个人社区&#xff09; &#x1f4d6;专栏链接&#xff1a;C学习 &#x1f3af;长路漫漫浩浩&#xff0c;万事皆有期待 上一篇博客&#xff1a;【C】STL…

基于微信小程序的个人健康数据管理平台设计与实现(源码+lw+部署文档+讲解等)

文章目录 前言具体实现截图论文参考详细视频演示为什么选择我自己的网站自己的小程序&#xff08;小蔡coding&#xff09;有保障的售后福利 代码参考源码获取 前言 &#x1f497;博主介绍&#xff1a;✌全网粉丝10W,CSDN特邀作者、博客专家、CSDN新星计划导师、全栈领域优质创作…

微服务技术栈-Docker应用部署

文章目录 前言一、数据卷二、Docker 应用部署1、MySQL部署2、Tomcat部署3、Nginx部署4、Redis部署5、Kafka部署 总结 前言 之前文章讲到过&#xff0c;docker运行程序的过程就是去仓库把镜像拉到本地&#xff0c;然后用一条命令把镜像运行起来变成容器&#xff0c;接下来我们将…

【数据库问题】删除数据库失败,提示:there is 1 other session using the database

删除数据库失败&#xff0c;提示&#xff1a;there is 1 other session using the database 解决办法&#xff1a; SELECT pg_terminate_backend(pg_stat_activity.pid) FROM pg_stat_activity WHERE datnametest_database AND pid<>pg_backend_pid(); 使用上述命令先关…

HTML5+CSS3+JS小实例:仿优酷视频轮播图

实例:仿优酷视频轮播图 技术栈:HTML+CSS+JS 效果: 源码: 【html】 <!DOCTYPE html> <html><head><meta http-equiv="content-type" content="text/html; charset=utf-8"><meta name="viewport" content=&quo…

自然语言处理 | WordNet

WordNet是词汇数据库,即英语词典,专为自然语言处理而设计。 Synset是一种特殊的简单接口,存在于 NLTK 中, 用于在 WordNet 中查找单词。同义词集实例是表达相同概念的同义词的分组。有些单词只有一个同义词集,有些则有多个。

三点式振荡器

相关说明 http://www.360doc.com/content/19/0527/16/61619294_838545271.shtml 高频信号发生器设计—电容三点式振荡电路_电容三点式振荡电路工作原理_北辰-尘的博客-CSDN博客 如上图所示&#xff0c;典型的Colpitts振荡电路。首先忽略所有的电阻&#xff0c;他们是用来设置…

Linux通过QQ邮箱账号使用mailx发送邮件

Linux通过QQ邮箱账号使用mailx发送邮件 第一步&#xff1a;安装mailx 第二步&#xff1a;获取邮箱的授权码 第三步&#xff1a;配置mailx服务 第四步&#xff1a;添加数字证书 第五步&#xff1a;发送邮件测试&#xff01; 第一步&#xff1a;安装mailx # 安装mailx yum…

Android多线程学习:线程池(二)

一、线程池运行流程 具体执行流程如下&#xff1a; 1、首先检测线程池运行状态&#xff0c;如果不是RUNNING&#xff0c;则直接拒绝&#xff0c;线程池要保证在RUNNING的状态下执行任务&#xff1b; 2、如果workerCount < corePoolSize&#xff0c;则创建并启动一个线程来…

2023年中国临床信息系统市场规模及细分市场结构分析[图]

临床信息系统(ClinicalInformationSystem&#xff09;&#xff0c;其主要目标是支持医院医护人员的临床活动&#xff0c;收集和处理病人的临床医疗信息&#xff0c;丰富和积累临床医学知识&#xff0c;并提供临床咨询、辅助诊疗、辅助临床决策。传统上&#xff0c;一些人把直接…

如何在 Spring Boot 中进行分布式追踪

在 Spring Boot 中进行分布式追踪 分布式系统中的应用程序由多个微服务组成&#xff0c;它们可以位于不同的服务器、容器或云中。当出现问题时&#xff0c;如性能瓶颈、错误或延迟&#xff0c;了解问题的根本原因变得至关重要。分布式追踪是一种用于跟踪和分析分布式应用程序性…

【数据库——MySQL】(14)过程式对象程序设计——游标、触发器

目录 1. 游标1.1 声明游标1.2 打开游标1.3 读取游标1.4 关闭游标1.5 游标示例 2. 触发器2.1 创建触发器2.2 修改触发器2.3 删除触发器2.4 触发器类型2.5 触发器示例 参考书籍 1. 游标 游标一般和存储过程一起配合使用。 1.1 声明游标 要使用游标&#xff0c;需要用到 DECLAR…

java Spring Boot整合jwt实现token生成

先在 pom.xml 文件中注入依赖 <!-- JWT --> <dependency><groupId>io.jsonwebtoken</groupId><artifactId>jjwt-api</artifactId><version>0.11.2</version> </dependency> <dependency><groupId>io.jsonw…

ctfshow-web12(glob绕过)

打开链接&#xff0c;在网页源码里找到提示 要求以get请求方式给cmd传入参数 尝试直接调用系统命令&#xff0c;没有回显&#xff0c;可能被过滤了 测试phpinfo&#xff0c;回显成功&#xff0c;确实存在了代码执行 接下来我们尝试读取一下它存在的文件&#xff0c;这里主要介…

JavaScript中的深拷贝(deep copy)和浅拷贝(shallow copy)

聚沙成塔每天进步一点点 ⭐ 专栏简介 前端入门之旅&#xff1a;探索Web开发的奇妙世界 欢迎来到前端入门之旅&#xff01;感兴趣的可以订阅本专栏哦&#xff01;这个专栏是为那些对Web开发感兴趣、刚刚踏入前端领域的朋友们量身打造的。无论你是完全的新手还是有一些基础的开发…

5MW风电永磁直驱发电机-1200V直流并网Simulink仿真模型

&#x1f4a5;&#x1f4a5;&#x1f49e;&#x1f49e;欢迎来到本博客❤️❤️&#x1f4a5;&#x1f4a5; &#x1f3c6;博主优势&#xff1a;&#x1f31e;&#x1f31e;&#x1f31e;博客内容尽量做到思维缜密&#xff0c;逻辑清晰&#xff0c;为了方便读者。 ⛳️座右铭&a…

浅析森林烟火AI检测算法的应用及场景使用说明

一、方案背景 现有的森林防火监测系统落后&#xff0c;以人工地面巡护、瞭望塔高点巡查为主&#xff0c;存在巡护范围有限、巡护效率低等问题&#xff0c;建立健全的森林防火风险预警体系&#xff0c;实现对森林、林场等场景的全天候智能自动监测、火情预警&#xff0c;及时发…