微信小程序通过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 的元素 并输出

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

相关推荐
游戏开发爱好者811 小时前
iOS App 电池消耗管理与优化 提升用户体验的完整指南
android·ios·小程序·https·uni-app·iphone·webview
_pengliang11 小时前
小程序按住说话
开发语言·javascript·小程序
万岳科技程序员小金13 小时前
多端协同的招聘系统源码开发指南:小程序+APP一体化设计
小程序·软件开发·app开发·招聘小程序·同城招聘系统源码·招聘app开发·招聘软件开发
xkxnq14 小时前
微信小程序地理定位功能
微信小程序·小程序
難釋懷14 小时前
微信小程序全局数据共享
微信小程序·小程序
郭邯14 小时前
小程序自定义组件学习笔记
微信小程序
阿眠16 小时前
vue3实现web端和小程序端个人签名
前端·小程序·apache
2501_9159184118 小时前
iOS 性能监控工具全解析 选择合适的调试方案提升 App 性能
android·ios·小程序·https·uni-app·iphone·webview
xmdoor21 小时前
微信小程序:酒店预订管理系统
微信小程序·酒店预订·酒店系统·酒店管理
大锦终1 天前
【Linux】第一个小程序—进度条
linux·运维·服务器·小程序