微信小程序 boundingClientRect 获取元素节点位置信息不准确

微信小程序 获取页面元素视图位置的 高度不准确,官方没有明确的给解决方式。

wx.createSelectorQuery().select('#the-id').boundingClientRect(function(rect){
      rect.id      // 节点的ID
      rect.dataset // 节点的dataset
      rect.left    // 节点的左边界坐标
      rect.right   // 节点的右边界坐标
      rect.top     // 节点的上边界坐标
      rect.bottom  // 节点的下边界坐标
      rect.width   // 节点的宽度
      rect.height  // 节点的高度
    }).exec()

原因:是因为页面没有完全渲染完成就获取了高度

小程序提供了 onReady页面渲染完成时,但是部分机型无效,会有BUG

最终解决代码如下图所示:

onReady() {
    let that = this;
    //获取元素节点的位置信息
    const query = wx.createSelectorQuery().in(this)
    //小程序BUG不加延时算出来的高度部分机型不准确,目前官方没有给更好的解决方案
    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);
}

 

你可能感兴趣的:(微信小程序 boundingClientRect 获取元素节点位置信息不准确)