一、获取view宽高度

给view设置一个id(class)名,用法和jQuery类似,用来获取指定id相关信息。

<view id="test">测试view</view>

把方法写在onReady,是为了再页面初次渲染完成后,再去获取,避免不准确或获取不到的情况。

onReady: function (e) {
    const query = wx.createSelectorQuery();
    query.select('#test').boundingClientRect(function (res) {
        console.log(res)
    }).exec()
}

输出结果:
在这里插入图片描述

二、获取自定义组件宽高度

获取自定义组件的相关信息,与获取view信息基本一致,只需要把const query = wx.createSelectorQuery()替换成const query = wx.createSelectorQuery().in(this)就可以了。

const query = wx.createSelectorQuery().in(this);
query.select('#test').boundingClientRect(function (res) {
    console.log(res)
}).exec()

但是在实际使用的时候,却发现一个问题,这样是能获取到组件的相关信息,但是高度却和实际的有误差:
在这里插入图片描述
如图,获取到组件高度为603,而实际#test组件高度为160,这就有点坑了,不知道大家有没有遇到这样的情况???