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

news2024/12/24 19:07:54

小程序官方有提供给我们一个 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.coloradmin.cn/o/1067583.html

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

相关文章

IDEA 初始化配置

进入所有配置 配置外观 取消退出前确认和启动软件自动打开之前最后的项目 设置使用键盘Ctrl鼠标滚轮调整代码大小 设置字符集 设置构建工具 自动构建与自动编译 启用注解

think-rom(thinkphp) 数据库参数绑定bigint被处理成浮点数(科学计数)问题

背景 think-orm(db库)在处理长整型参数时会进行一次安全处理转换成浮点型&#xff0c;但php浮点数超过一定长度就会失去精准度变成科学计数&#xff0c;导致where条件匹配不上&#xff0c;这个问题目前覆盖thinkphp3到8全系&#xff1b; 解决方案 全局搜索 (float) $val[0] : …

迁移人大金仓问题汇总

迁移人大金仓问题汇总 1、SQL 错误 [42883]: 错误: 操作符不存在: tinyint Hint: 没有匹配指定名称和参数类型的操作符. 您也许需要增加明确的类型转换. SELECT id, model_id, process_definition_id, task_definition_key, TYPE, OPTIONS, scope_userid, scope_clas…

雷达分辨率单元、单向/双向雷达方程、天气雷达方程简介

一、点状目标 如果两个点状目标在一个分辨率单元中,经典脉冲雷达只能看到一个目标。 点状目标 二、雷达距离分辨率 对于简单的键控开/关脉冲调制: 对于使用脉冲内调制的雷达,距离分辨率取决于压缩脉冲的脉冲持续时间。脉冲压缩比(PCR)取决于传输带宽BWtx,即距离分辨率取…

大语言模型学到什么

背景&#xff1a; 这篇文章是对《LANGUAGE MODELS REPRESENT SPACE AND TIME》论文的翻译加解读。之所以选这篇文章是因为最近在研究大模型的可解释性&#xff0c;以及基于可解释性对大模型的下游任务适配做训练级别可控性增强研究。其实总结成两句话就是&#xff1a; 1.大模…

amber14自由能计算及增强采样方法

1分子力学简介 1.1分子力学的基本假设 1.2分子力学的主要形式 2分子力场 2.1分子力场的简介 2.2分子力场的原理 分子力场的分类及应用 二.LINUX入门 教学目标&#xff1a;掌握数值计算平台&#xff0c;熟悉计算机语言&#xff0c;能够使用vim编辑器简单编辑文件。 3LINUX 简介 …

84.柱状图中最大的矩形

class Solution { public:int largestRectangleArea(vector<int>& heights) {//法一&#xff1a;枚举宽&#xff0c;超时if(0){int nheights.size();int area0;for(int left0;left<n;left){int minHINT_MAX;for(int rightleft;right<n;right){minHmin(minH,hei…

Spring实例化源码解析之MessageSource(七)

前言 在阅读完 registerBeanPostProcessors 源码之后&#xff0c; 下一步就进入到 initMessageSource&#xff0c;这一步主要作用是初始化国际化文件。 源码分析 这段源码是一个Java方法&#xff0c;用于初始化消息源&#xff08;MessageSource&#xff09;。在Spring框架中…

万字详解HTTP协议面试必备技能

目录 一、HTTP 是什么 二、理解 "应用层协议" 2.1理解 HTTP 协议的工作过程 2.2HTTP 协议格式 2.3抓包工具的使用 2.4抓包工具的原理 2.5抓包结果 2.5.1HTTP请求 2.5.2HTTP响应 2.6协议格式总结 三、HTTP 请求 (Request) 3.1认识 URL 3.1.1URL 基本格式 …

Jmeter 多实例压测

Apache JMeter 是一个开源的 Java 应用程序&#xff0c;用于性能测试和负载测试。它最初是为测试 Web 应用程序而创建的&#xff0c;但现在已广泛用于测试各种不同类型的应用程序&#xff0c;包括数据库、消息队列、FTP 服务器等。JMeter 提供了丰富的功能&#xff0c;使您能够…

行内元素文字背景被截断的问题,如何进行修改?

1.问题如图所示 这里背景是被截断的&#xff0c;有什么css样式可以修改它呢&#xff1f; 效果实现如图&#xff1a; 不一样的地方在于这里的截断位置是引用了开头和结尾的位置。 如何实现&#xff1f; <!DOCTYPE html> <html lang"en"> <head><…

终于找到了!Jenkins最全最详细入门指南

目录 一、介绍 二、功能 三、搭建Jenkins目的 四、安装 五、Jenkins的三大概念 六、创建job & 配置git 七、构建触发器&#xff08;build triggers&#xff09; 八、运行python脚本 九、测试报告展示 十、配置邮件并发送 最后 一、介绍 Jenkins是开源的,使用Java编…

Linux系统部署PostgreSQL 单机数据库

安装方式 1 安装包方式 &#xff08;Packages and Installers&#xff09; 支持的操作系统包括 liunxMacosWindowsBSDSolaris 2 源码安装 &#xff08;Source code&#xff09; 下载源码包 通过下载地址PostgreSQL: File Browser 可以看到有各个版本的源码目录 选择13.1…

二维离散傅里叶变换的实现

二维离散傅里叶变换的实现 1.使用Python包实现2.使用c实现2.1 FFTW库安装2.2 结果比较 参考文献 1.使用Python包实现 import numpy as np import matplotlib.pyplot as plt anp.array([0, 2, 4, 1,6, 1, 3, 2,5]).reshape(3,3) fnp.fft.fft2(a) fshiftnp.fft.fftshift(f) mag…

CSS圆角大杀器,使用滤镜构建圆角及波浪效果

目录 1&#xff0c;border-radius实现圆角2&#xff0c;filter: contrast() 配合 filter: blur() 实现圆角3&#xff0c;使用 filter: contrast() 配合 filter: blur() 实现波浪效果 1&#xff0c;border-radius实现圆角 通常我们加个 border-radius就可实现一个div盒子的圆角…

分页查询(关键词: limit)

MySQL从小白到总裁完整教程目录:https://blog.csdn.net/weixin_67859959/article/details/129334507?spm1001.2014.3001.5502 比如现在有一张表emp有15条数据 我想每页只显示5条数据,分3页,这样看起来简捷一些,我该怎么实现呢 语法格式: select */列名 from 表名 limit 初…

CMAKE使用记录

CMAKE使用记录 CMake简化了针对同一项目的不同平台、不同编译器的构建过程和编译过程&#xff0c;能够管理各种规模的项目。 CMAKE命令记录 cmake命令说明 语法&#xff1a; # cmake构建项目的编译系统 Generate a Project Buildsystem > cmake [<options>] -B &…

85.最大矩形

单调栈&#xff0c;时间复杂度o(mn)&#xff0c;空间复杂度o(mn) class Solution { public:int maximalRectangle(vector<vector<char>>& matrix) {int mmatrix.size();if(m0){return 0;}int nmatrix[0].size();//记录矩阵中每个元素左边连续1的数量vector<…

如何开发一款高效便捷的搬家服务小程序

随着互联网的发展&#xff0c;小程序已成为各行各业重要的业务推广和用户服务平台。对于搬家行业而言&#xff0c;开发一款高效便捷的搬家服务小程序具有巨大的市场潜力。本文将为您详细介绍如何开发一款这样的搬家服务小程序。 一、进入乔拓云网后台 在开始制作搬家服务小程序…

番外项目---Vim编辑器

Task01: 1.在/tmp目录下建立一个名为mytest的目录&#xff0c;进入mytest目录当中; 2.将/etc/man_db.conf复制到上述目录下面&#xff0c;使用vim打开目录下的man_db.conf文件; 3.在vim中设定行号&#xff0c;移动到第58行&#xff0c;向右移动15个字符&#xff0c;请问你看到…