当前位置: 首页 > 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 的元素 并输出
这里 就正常的输出了 每个元素 高度 宽度 与页面上下左右的距离
在这里插入图片描述

http://www.lryc.cn/news/185467.html

相关文章:

  • MySQL-事务
  • 自动定时删除磁盘文件的脚本(从文件日期最早的开始删)
  • 拆解CPU的基本结构和运行原理
  • Docker安装——Ubuntu (Jammy 22.04)
  • Fast DDS之Transport
  • 爱普生L125X_L325X系列打印机Wi-Fi配置方法(Smart Panel)
  • 【回顾一下Docker的基本用法】
  • 【Python】Python基础知识
  • 【计算机视觉 05】YOLO论文讲解:V1-V7
  • git全局与单仓库的密码管理
  • IDEA的使用(一) (IntelliJ IDEA 2022.1.3版本)
  • javaee SpringMVC文件上传 项目结构
  • JavaScript DOM 函数大全详解(使用最新的 JS 语法)
  • Stm32_标准库_8_ADC_光敏传感器_测量具体光照强度
  • 基于SSM的固定资产管理系统的设计与实现
  • Leetcode---364场周赛
  • 使用 Powershell 检索不理解的命令
  • 基于 FPGA 的机器博弈五子棋游戏
  • uCOSIII实时操作系统 三 移植
  • 机器学习之SGD, Batch, and Mini Batch的简单介绍
  • Windows电脑上的多开器与分布式存储系统的关系
  • 积分球可以用于什么光谱光学检测
  • 【力扣面试题】URL化
  • 计算机网络基础(二):物理层、数据链路层及网络层
  • 小白自学—网络安全(黑客技术)笔记
  • 2.2.3 vim操作合集
  • 解决 Jenkins 性能缓慢的问题~转
  • Matrix卡顿优化之IdleHandlerLagTracer源码分析
  • (ubuntu)Docker 安装linux 详情过程
  • ArcMap:第二届全国大学生GIS技能大赛(广西师范学院)详解-上午题