有个需要是判断当前滚动到什么位置,然后高亮顶部对应的菜单。因为元素的内容是从接口获取的,需要获取在获取数据并页面渲染完成之后的元素高度,在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()
获取高度发现不一定是页面渲染之后的高度。
怎么样才能获取到元素的渲染后高度或者有什么其他的方法可以实现这个需求?
无法获取元素高度那scroll-view高度适配不就是摆设了?
我测的iphone8p也是,第一次出来的高度和settimeout3000之后的高度居然不一样,我看了所有的获取高度第一次肯定不正确。官方一年过去了也还没处理这个bug。
我的问题跟你的一样,也是要渲染完才拿,就是不知道怎么判断页面渲染完成
不得不说微信小程序巨坑,然后我的解决方案是:
setTimeout(() => { // fixbug:不加setTimeout算出来的宽度会不准,极其坑 this.createSelectorQuery() .select('#box') .fields({ size: true }, (size) => { this.setData({ rectWidth: size.width }) }).exec() }, 0);
boundingClientRect方法同理。
获取高度的在ready 或者 onReady函数内去获取,不然页面没渲染完成可能获取的不准确
也有可能是元素中某个子元素高度不够可能导致获取的高度与实际高度不同
使用this.$nextTick,等页面渲染完再执行获取高度的方法
如果获取的内容里面有widthFit的image,要把widthFit去掉给定宽高然后setTimeout延迟了。获取试试
如果是列表的话,尽量固定他的高度。给他一个准确的值,尤其是图片,固定了高度,这样就是正确的结果
如果多个view(很长)里含有图片懒加载,那么光设置timeout还不够,需要取消懒加载才行。[18年的问题,现在都2020年7月24了,还没解决。]
应该是你计算高度的view里面有图片或者其他高度变更,类似图片高度原本是100px,但是你为了和宽度比例一致你调整了,这样导致计算错误