微信小程序获取页面元素位置的方法如下:
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页面渲染完成时,但是还是会发现有问题
解决方法:采用setTimeout延迟加载数据
onReady() {
let that = this;
//获取元素节点的位置信息
const query = wx.createSelectorQuery().in(this)
//小程序BUG不加延时算出来的高度部分机型不准确,目前官方没有给更好的解决方案
setTimeout(() => {
query.select('.indexBar-box').boundingClientRect(res=>{
that.setData({
boxTop: res.top
})
}).exec();
}, 0);
}