微信小程序 获取页面元素视图位置的 高度不准确,官方没有明确的给解决方式。
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);
}