小程序 - 获取html标签相对位置、宽高

微信官方文档 wx.createSelectorQuery()

官方代码如下：

const query = wx.createSelectorQuery()
query.select('#the-id').boundingClientRect()
query.selectViewport().scrollOffset()
query.exec(function (res) {
  res[0].top // #the-id节点的上边界坐标
  res[1].scrollTop // 显示区域的竖直滚动位置
})

console.log(res)输出res结果，在控制台看到以下的结果

可以看到res返回一个包含两个对象的数组，第一个对象包含元素的基本属性(width、height、top、left、right、bottom)，第二个对象包含元素滚动属性(scrollLeft、scrollTop)

如果常用第一个对象的属性，可以进行封装，代码如下：

queryNodes (id, attr) {
  return new Promise((resolve, reject) => {
    let query = wx.createSelectorQuery()
    query.select(id).boundingClientRect()
    
    query.exec((res) => {
      resolve(res[0][attr])
    })
  })
},

在使用