boundingClientRect获取节点位置不正确怎么处理

如果你经常使用uniapp开发，那么你或许遇到过boundingClientRect API获取元素位置不准确的情况，本文主要就是解决boundingClientRect 获取元素位置不准确的问题。

首先看一下boundingClientRect返回值

好多小伙伴使用这个方法直接获取元素的位置，结果发现值不准确。

let that = this
const query = uni.createSelectorQuery().in(that)
query.select('.indexBar-box').boundingClientRect(rect=>{
      rect.id      // 节点的ID
      rect.dataset // 节点的dataset
      rect.left    // 节点的左边界坐标
      rect.right   // 节点的右边界坐标
      rect.top     // 节点的上边界坐标
      rect.bottom  // 节点的下边界坐标
      rect.width   // 节点的宽度
      rect.height  // 节点的高度
    }).exec();

返回值出现偏差的原因

因为这个api是异步返回值，所以在计算的时候，当前页面可能还没有完全渲染成功，有些元素的高度还没有被计算进去，导致整个结果出现了偏差，这个问题的解决方案有很多，小编给大家介绍一个整体比较简单的方法。

created() {
    let that = this;
    //获取元素节点的位置信息
    const query = wx.createSelectorQuery().in(this)
    //在不加延时算出来的高度部分机型不准确，目前官方没有给更好的解决方案
    setTimeout(() => { 
      query.select('.indexBar-box').boundingClientRect(res=>{
        that.setData({
          boxTop: res.top
        })
      }).exec();
 
      query.select('.indexes').boundingClientRect(res=>{
        that.setData({
          barTop: res.top
        })
      }).exec();
    }, 0);
}

整体来说，目前官方没有给出相对比较完善的解决方案，上面是小编自己根据实际经验得出的结论，确实可行。