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

-耿瑞-2023-10-09 14:53

小程序官方有提供给我们一个 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 的元素并输出

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

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

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