当前位置: 首页 > news >正文

微信小程序通过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 的元素 并输出
这里 就正常的输出了 每个元素 高度 宽度 与页面上下左右的距离
在这里插入图片描述

相关文章:

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

小程序官方有提供给我们一个 const query wx.createSelectorQuery() 函数 我们可以先编写这样一段代码 wxml <view><button bindtap"getDom">点击查看</button><view class "textIn" style "height: 100px;width: 30px;&quo…...

MySQL-事务

MySQL-事务 1.什么是事务 举例&#xff1a;想象炒菜的过程。 洗菜切菜炒菜装盘 我相信缺少任何任何一个步骤&#xff0c;都不完美&#xff01;&#xff01;&#xff01;可以将炒菜的过程理解为一个事务&#xff0c;是一组操作的集合&#xff0c;而MySQL中的事务也是如此。但…...

自动定时删除磁盘文件的脚本(从文件日期最早的开始删)

#!/bin/bash# 指定的挂载点 MOUNTPOINT"/media/vm/MyDisk512GB"# 设置磁盘大小的限制 (例如&#xff1a;800G) LIMIT$((800 * 1024 * 1024)) # 单位是KB# 获取挂载点的已使用空间 USED_SPACE$(df -kP "$MOUNTPOINT" | tail -1 | awk {print $3})echo &quo…...

拆解CPU的基本结构和运行原理

CPU的基本结构 CPU是一个计算系统的核心 南北桥芯片将CPU与外设连接起来 CPU执行流程 CPU的电路基础 组合电路基本原理 时序电路基本原理 多核成为主流 汇编语言和寄存器 中断的基本原理 中断的产生 中断服务程序 CPU 做为计算机的总司令官&#xff0c;它管理着计算…...

Docker安装——Ubuntu (Jammy 22.04)

一、为什么要用 Ubuntu&#xff1f;(centos和ubuntu有什么区别&#xff09; 使用lsb_release命令&#xff1a;lsb_release -a &#xff0c;即可查看ubantu的版本&#xff0c;但是为什么要使用ubantu 呢&#xff1f; 区别&#xff1a;1、centos基于EHEL开发&#xff0c;而ubunt…...

Fast DDS之Transport

目录 transport层负责为DDS用户数据收发和服务发现提供通信。包含UDP&#xff0c;TCP&#xff0c;SHM。...

爱普生L125X_L325X系列打印机Wi-Fi配置方法(Smart Panel)

准备工作&#xff1a; 手机需要下载“Epson Smart Panel”APP&#xff1b; 配置无线&#xff08;Wi-Fi&#xff09;方法 说明&#xff1a;SSID名称&#xff08;Wi-Fi名&#xff09;不能包含中文字符,路由器需要选择2.4GHz频段; 1. 打开“Epson Smart Panel”软件&#xff0…...

【回顾一下Docker的基本用法】

文章目录 回顾一下Docker的基本用法1.初识Docker1.1.什么是Docker1.1.1.应用部署的环境问题1.1.2.Docker解决依赖兼容问题1.1.3.Docker解决操作系统环境差异1.1.4.小结 1.2.Docker和虚拟机的区别1.3.Docker架构1.3.1.镜像和容器1.3.2.DockerHub1.3.3.Docker架构1.3.4.小结 1.4.…...

【Python】Python基础知识

【Python】Python基础知识 关键字 查看Python关键字&#xff1a; >python >>>import keyword >>>keyword.kwlist 注释 注释有两方面作用&#xff1a; &#xff08;1&#xff09;提高程序的可读性&#xff08;最重要的作用&#xff09;&#xff1b…...

【计算机视觉 05】YOLO论文讲解:V1-V7

https://ai.deepshare.net/live_pc/l_63243a65e4b050af23b79338 Part1.目标检测与YOLO系列 1. 目标检测任务及发展脉络 2. YOLO的发展史 Anchors Base原理&#xff1a; Part2.YOLOV1-V3 3. YOLO V1的网络结构 4. YOLO V3的网络结构与实验结果 Part3.YOLO的进化 5. YOLO V4的网络…...

git全局与单仓库的密码管理

概要 在使用git时&#xff0c;有默认的全局配置&#xff0c;每个仓库也有自己的配置&#xff0c;在使用时常常傻傻分不清楚&#xff0c;现在进行一个简单的整理记录。 一般情况下全局配置中的git账号和邮箱通常设置成自己的&#xff0c;其他仓库再根据项目需要进行单独配置&a…...

IDEA的使用(一) (IntelliJ IDEA 2022.1.3版本)

目录 1. IDEA项目结构 2. 模块的导入操作 2.1 正规操作 2.2 取巧操作 2.3 出现乱码 2.4 模块改名 3. 代码模板的使用 后缀补全&#xff08;Postfix Completion&#xff09;、实时模板&#xff08;Live Templates&#xff09;菜单里面什么介绍都有&#xff0c;可以自学&a…...

javaee SpringMVC文件上传 项目结构

引入依赖 <?xml version"1.0" encoding"UTF-8"?><project xmlns"http://maven.apache.org/POM/4.0.0" xmlns:xsi"http://www.w3.org/2001/XMLSchema-instance"xsi:schemaLocation"http://maven.apache.org/POM/4.0.0…...

JavaScript DOM 函数大全详解(使用最新的 JS 语法)

JavaScript DOM 函数大全详解&#xff08;使用最新的 JS 语法&#xff09; JavaScript 的 Document Object Model&#xff08;DOM&#xff09;是用于操作网页内容的编程接口。在最新的 JavaScript 语法下&#xff0c;我们有很多方便和高效的方法来处理 DOM。下面是一些常用 DO…...

Stm32_标准库_8_ADC_光敏传感器_测量具体光照强度

ADC简介 测量方式 采用二分法比较数据 IO通道 ADC基本结构及配置路线 获取数字变量需要用到用到光敏电阻的AO口&#xff0c;AO端口接在PA0引脚即可 测得的模拟数据与实际光照强度之间的关系为 光照强度 100 - 模拟量 / 40;代码&#xff1a; 完整朴素代码&#xff1a; #in…...

基于SSM的固定资产管理系统的设计与实现

末尾获取源码 开发语言&#xff1a;Java Java开发工具&#xff1a;JDK1.8 后端框架&#xff1a;SSM 前端&#xff1a;采用JSP技术开发 数据库&#xff1a;MySQL5.7和Navicat管理工具结合 服务器&#xff1a;Tomcat8.5 开发软件&#xff1a;IDEA / Eclipse 是否Maven项目&#x…...

Leetcode---364场周赛

题目列表 2864. 最大二进制奇数 2865. 美丽塔 I 2866. 美丽塔 II 2867. 统计树中的合法路径数目 一、最大二进制奇数 这题只要你对二进制有了解(学编程的不会不了解二进制吧)&#xff0c;应该问题不大&#xff0c;这题要求最大奇数&#xff0c;1.奇数&#xff1a;只要保证…...

使用 Powershell 检索不理解的命令

使用 Powershell 检索不理解的命令 尝试使用 Powershell 完成 Powershell 的命令行 使用 Powershell 时&#xff0c;有时您会忘记某个 cmdlet 或想要了解哪些 cmdlet 可用。在这种情况下&#xff0c;最好在互联网上查找&#xff0c;但您也可以使用 Powershell 函数来完成。 以…...

基于 FPGA 的机器博弈五子棋游戏

基于 FPGA 的机器博弈五子棋游戏 一,设计目的 五子棋是一种深受大众喜爱的游戏,其规则简单,变化多端,非常富有趣味性 和消遣性。棋类游戏在具备娱乐性、益智性的同时也因为其载体大多是手机, 电脑等移动互联网设备导致现代社会低头族等现象更加严重,危害青少年的身 体健康…...

uCOSIII实时操作系统 三 移植

目录 uCOSIII简介&#xff1a; 准备工作&#xff1a; 准备基础工程&#xff1a; UCOSIII工程源码&#xff1a; UCOSIII移植&#xff1a; 向基础工程中添加相应的文件夹 向工程中添加分组 常见问题&#xff1a; 下载验证&#xff1a; uCOSIII简介&#xff1a; UCOS-I…...

交叉调整率差的5大根源—变压器、绕组、反馈、拓扑、元件

Q1&#xff1a;导致交叉调整率差的第一大根源是什么&#xff1f;变压器漏感与绕组耦合不良。漏感使能量不能完全传递到辅路&#xff0c;各绕组漏感不一致&#xff0c;负载变化时电压漂移更明显。耦合系数越接近 1&#xff0c;交叉调整率越好。Q2&#xff1a;绕组绕制方式对交叉…...

OpenClaw+nanobot镜像:个人社交媒体监控系统搭建

OpenClawnanobot镜像&#xff1a;个人社交媒体监控系统搭建 1. 为什么需要个人社交媒体监控系统 作为一个长期关注技术趋势的博主&#xff0c;我经常需要追踪社交媒体上的热点话题和关键词变化。过去我都是手动刷新各个平台&#xff0c;不仅效率低下&#xff0c;还容易错过关…...

如何用20万条真实动作数据,终结机器人动作“脑补”

3月30日&#xff0c;某知名媒体报道了一项来自南洋理工大学的前沿技术突破。研究团队利用超过20万条“4D交互数据”结合“运动学锚定”&#xff0c;研发出一种新型的“生成式仿真”技术&#xff0c;有效解决了机器人动作模拟中长期存在的“脑补”难题。据悉&#xff0c;这一技术…...

本地部署开源直播视频平台 Owncast 并实现外部访问

Owncast 是一款开源的、自托管的直播和视频平台&#xff0c;它允许用户完全掌控自己的直播基础设施、数据和观众互动&#xff0c;避免依赖 Twitch 、YouTube 等大型中心化平台&#xff0c;为内容创作者提供一个独立、去中心化的直播解决方案。本文将详细介绍如何利用 Docker 在…...

VisualVM企业级部署指南:大规模Java应用监控最佳实践

VisualVM企业级部署指南&#xff1a;大规模Java应用监控最佳实践 【免费下载链接】visualvm VisualVM is an All-in-One Java Troubleshooting Tool 项目地址: https://gitcode.com/gh_mirrors/vi/visualvm VisualVM是一款功能强大的全合一Java故障排除工具&#xff0c;…...

SDXL 1.0电影级绘图工坊真实案例:文化遗产数字化重建与风格复原实践

SDXL 1.0电影级绘图工坊真实案例&#xff1a;文化遗产数字化重建与风格复原实践 想象一下&#xff0c;你面前有一张因年代久远而模糊不清的古建筑照片&#xff0c;或是仅存于文字描述中的历史场景。如何将它们清晰地、生动地、甚至以不同艺术风格再现出来&#xff1f;这曾是考…...

如何用RecastNavigation构建高效AI导航系统:5个实战技巧揭秘

如何用RecastNavigation构建高效AI导航系统&#xff1a;5个实战技巧揭秘 【免费下载链接】recastnavigation Navigation-mesh Toolset for Games 项目地址: https://gitcode.com/gh_mirrors/re/recastnavigation 你是否曾为游戏中的AI角色设计路径规划而头疼&#xff1f…...

从零开始:使用Deepspeed ZeRO3优化Qwen3-8B微调,解决多卡显存不足问题

从零开始&#xff1a;使用Deepspeed ZeRO3优化Qwen3-8B微调&#xff0c;解决多卡显存不足问题 当你面对一个8B参数规模的大语言模型时&#xff0c;单卡训练往往显得力不从心。显存不足的报错就像一堵高墙&#xff0c;阻挡着许多开发者的探索之路。而多卡并行训练又带来了新的挑…...

终极指南:使用 crypto-js 测试套件确保你的加密功能100%可靠

终极指南&#xff1a;使用 crypto-js 测试套件确保你的加密功能100%可靠 【免费下载链接】crypto-js JavaScript library of crypto standards. 项目地址: https://gitcode.com/gh_mirrors/cr/crypto-js 在Web开发中&#xff0c;你有没有遇到过这样的场景&#xff1a;你…...

从IPv4到IPv6迁移实战:在eNSP里排查那些容易被忽略的安全配置(避坑指南)

从IPv4到IPv6迁移实战&#xff1a;eNSP环境下的安全配置深度排查指南 当企业网络从IPv4向IPv6过渡时&#xff0c;工程师们常常会陷入一种"配置惯性"——沿用IPv4时代的安全策略直接套用到IPv6环境。这种思维定式往往会导致网络出现各种"隐形漏洞"。本文将通…...