boundingClientRect获取的高度不准确
发布于 5 年前 作者 juan58 12366 次浏览 来自 问答

有个需要是判断当前滚动到什么位置,然后高亮顶部对应的菜单。因为元素的内容是从接口获取的,需要获取在获取数据并页面渲染完成之后的元素高度,在setdata的callback里使用

    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()

获取高度发现不一定是页面渲染之后的高度。

怎么样才能获取到元素的渲染后高度或者有什么其他的方法可以实现这个需求?

10 回复

我遇到的问题是把一段文字塞到一个元素(它的初始高度为0)里,需要塞完后的高度…

求教您,我想做一个锚点效果,点击目录跳到节点,用

 rect.top

我取到的距顶高度每次都不一样,除非一开始就从顶部点,才是正确的高度,如果滚到中间了再点目录,高度就变了,要如何重置高度吗?

我的问题跟你的一样,也是要渲染完才拿,就是不知道怎么判断页面渲染完成

同遇到不准的情况,请问有解了么?

我的解决办法:

boundingClientRect 方法放到 ajax请求完成之后

然后获取的高度就正常了

so

小程序生命周期是什么鬼


fo了,官方这种bug也不管?无法获取元素高度那scroll-view高度适配不就是摆设了?

我测的iphone8p也是,第一次出来的高度和settimeout3000之后的高度居然不一样,我看了所有的获取高度第一次肯定不正确。一年过去了也不管?微信官方还一直搞什么新组件,麻烦把以有API弄准确再说行吗?

我也碰到这个问题了,其实就是小程序缺乏像  vue.$nextTick 这样的hook,渲染完成也没有办法感知。临时的hack 也只能 setTimeout(fn,  合理时间) 了

页面渲染完之后才能拿,但怎么判断页面渲染完呢?

同样遇到获取的高度跟实际渲染高度不一致的问题,现在有啥解决办法吗?

回到顶部