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

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

相关推荐
尘似鹤2 小时前
微信小程序学习(五)
学习·微信小程序·小程序
计算机毕业设计小帅2 小时前
【2026计算机毕业设计】基于微信小程序的英语在线学习系统
学习·微信小程序·毕业设计·课程设计
一只小白菜~3 小时前
记录一下在微信小程序中的使用MobX做状态管理
微信小程序·小程序·mobx
weixin_lynhgworld5 小时前
淘宝扭蛋机小程序:如何用游戏化思维提升电商转化率
游戏·小程序
小小王app小程序开发12 小时前
潮玩盲盒抽赏小程序玩法拆解:不同视角下的增长逻辑分析
小程序
星光一影12 小时前
Java版旅游系统/文旅系统/旅游助手/旅游攻略/公众号/小程序/app全套源码
java·小程序·开源软件·旅游·源代码管理
小小王app小程序开发12 小时前
盲盒小程序爬塔玩法深度细分:非技术视角下的运营细节拆解
小程序
游戏开发爱好者812 小时前
苹果iOS26系统升级:液态玻璃与智能功能全解析
macos·ios·小程序·uni-app·objective-c·cocoa·iphone
流***陌15 小时前
宠物寄养美容小程序前端功能解析:贴心照料宠物的全流程支撑
小程序·宠物
小小王app小程序开发18 小时前
任务悬赏小程序深度细分分析:非技术视角下的运营逻辑拆解
大数据·小程序