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

小程序官方有提供给我们一个 const query = wx.createSelectorQuery() 函数

我们可以先编写这样一段代码

wxml

html 复制代码
<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编写代码如下

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

我们运行代码 并点击按钮 点击查看

这里 我们获取了所有 类名中包含 textIn 的元素 并输出

这里 就正常的输出了 每个元素 高度 宽度 与页面上下左右的距离

相关推荐
2501_916008894 小时前
用多工具组合把 iOS 混淆做成可复用的工程能力(iOS混淆|IPA加固|无源码混淆|Ipa Guard|Swift Shield)
android·开发语言·ios·小程序·uni-app·iphone·swift
liweiweili1268 小时前
驾校陪练下单小程序
小程序
TiAmo zhang8 小时前
微信小程序开发案例 | 简易登录小程序
微信小程序·小程序·1024程序员节
黑马源码库miui520869 小时前
场馆预定系统小程序
微信·微信小程序·小程序·1024程序员节
说私域12 小时前
基于开源链动2+1模式AI智能名片S2B2C商城小程序的市场份额扩张路径研究
人工智能·小程序·开源
2501_9151063213 小时前
iOS 打包 IPA 全流程详解,签名配置、工具选择与跨平台上传实战指南
android·macos·ios·小程序·uni-app·cocoa·iphone
00后程序员张13 小时前
iOS 混淆实操指南多工具组合实现 IPA 混淆、加固与发布治理 IPA 加固
android·ios·小程序·https·uni-app·iphone·webview
CRMEB系统商城18 小时前
【新版发布】标准版PHP v5.6.4正式版,优化部分用户体验
java·大数据·小程序·php·ux
知识分享小能手1 天前
uni-app 入门学习教程,从入门到精通,uni-app 企业项目实战:鲁嗑瓜子项目开发知识点(9)
前端·javascript·学习·微信小程序·小程序·uni-app·vue