收藏
回答

boundingClientRect获取的高度不准确

框架类型 问题类型 API/组件名称 终端类型 操作系统 微信版本 基础库版本
小程序 Bug boundingClientRect 客户端 iOS 6.6.6 1.9.9

有个需要是判断当前滚动到什么位置,然后高亮顶部对应的菜单。因为元素的内容是从接口获取的,需要获取在获取数据并页面渲染完成之后的元素高度,在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()

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

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

回答关注问题邀请回答
收藏

18 个回答

  • Yrobot
    Yrobot
    2019-05-25

    无法获取元素高度那scroll-view高度适配不就是摆设了?

    我测的iphone8p也是,第一次出来的高度和settimeout3000之后的高度居然不一样,我看了所有的获取高度第一次肯定不正确。官方一年过去了也还没处理这个bug。

    2019-05-25
    有用 3
    回复
  • 梁嘉财、
    梁嘉财、
    2018-04-17

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

    2018-04-17
    有用 3
    回复 1
    • 胖婷
      胖婷
      2020-12-23
      请问你解决了吗
      2020-12-23
      1
      回复
  • 子咻
    子咻
    2020-04-13

    不得不说微信小程序巨坑,然后我的解决方案是:

    setTimeout(() => { // fixbug:不加setTimeout算出来的宽度会不准,极其坑
        this.createSelectorQuery()
          .select('#box')
          .fields({ size: true }, (size) => {
            this.setData({
              rectWidth: size.width
            })
          }).exec()
    }, 0);
    

    boundingClientRect方法同理。


    2020-04-13
    有用 2
    回复 15
    • Serendipity
      Serendipity
      2020-04-28
      老哥稳, 这个方法解决了我现在的问题, 因为我的dom 有wx:if 判断,666
      2020-04-28
      回复
    • KLK
      KLK
      2023-03-14
      现在是2023年3月14日,这个问题依然没有解决
      2023-03-14
      2
      回复
    • 小白龙
      小白龙
      2023-04-24回复KLK
      2023年4月24日,这个问题依然没有解决,淦
      2023-04-24
      回复
    • 淡定
      淡定
      2023-04-28回复小白龙
      今天是4月28号,放假了,我还在看这个问题
      2023-04-28
      回复
    • 🌵
      🌵
      2023-07-12
      要不是工作不好找,狗都不写,太坑了,最近写小程序发现一堆问题
      2023-07-12
      回复
    查看更多(10)
  • 放风筝的小男孩
    放风筝的小男孩
    2020-07-22

    获取高度的在ready 或者 onReady函数内去获取,不然页面没渲染完成可能获取的不准确

    2020-07-22
    有用 1
    回复 2
    • 薛定谔的🐶
      薛定谔的🐶
      2021-08-25
      ready之后也可能不准啊
      2021-08-25
      回复
    • 郝鹏
      郝鹏
      2023-06-25
      如果是列表的话,尽量固定他的高度。这样就是正确的结果
      2023-06-25
      回复
  • ㅤ
    10-22

    也有可能是元素中某个子元素高度不够可能导致获取的高度与实际高度不同

    10-22
    有用
    回复
  • 苏苏 Vicky
    苏苏 Vicky
    2023-09-21

    使用this.$nextTick,等页面渲染完再执行获取高度的方法

    2023-09-21
    有用
    回复
  • 近在眼前
    近在眼前
    2023-09-16

    如果获取的内容里面有widthFit的image,要把widthFit去掉给定宽高然后setTimeout延迟了。获取试试

    2023-09-16
    有用
    回复 1
    • 黑猪.
      黑猪.
      06-20
      去掉widthfit怎么保持image的百分比呢
      06-20
      回复
  • 郝鹏
    郝鹏
    2023-06-25

    如果是列表的话,尽量固定他的高度。给他一个准确的值,尤其是图片,固定了高度,这样就是正确的结果

    2023-06-25
    有用
    回复
  • Steve Gan
    Steve Gan
    2020-07-24

    如果多个view(很长)里含有图片懒加载,那么光设置timeout还不够,需要取消懒加载才行。[18年的问题,现在都2020年7月24了,还没解决。]

    2020-07-24
    有用
    回复 1
    • KLK
      KLK
      2023-03-14
      2023年3.14日 还没解决 晕
      2023-03-14
      回复
  • 小小补丁不打补丁
    小小补丁不打补丁
    2020-04-05

    应该是你计算高度的view里面有图片或者其他高度变更,类似图片高度原本是100px,但是你为了和宽度比例一致你调整了,这样导致计算错误

    2020-04-05
    有用
    回复

正在加载...

登录 后发表内容