uniapp $el以及createSelectorQuery获取组件的宽高、offsetWidth等

在vue中，我们要获取一个组件的宽高尺寸、定位距离等信息可以给该组件一个ref，然后使用this.$refs就可以获取组件的信息。如：

var width= this.$refs.text.offsetWidth;

详见：vue $ref 获取DOM节点的宽高http://www.5imoban.net/jiaocheng/bootstrap/2021/0724/4905.html。在uniapp中在H5和小程序端需要通过$el来获取信息，所以如果直接打印，所以打印this.$refs.text是undefined，而用this.$refs.text.offsetWidth就直接报错了，需要再加个$el才能获取到节点


上面代码需要改为：

var width= this.$refs.text.$el.offsetWidth;

而从上图可以看到，$refs、$el这些都不在支持，这时候就要用到uniapp给的API uni.createSelectorQuery() 来获取节点信息。


具体用法如下：

let info = uni.createSelectorQuery().select(".index")
info.boundingClientRect((data) => {
    this.tabWrapStyle = {
        position: 'fixed',
        top: '0',
        zIndex: '9',
        paddingTop: this.statusBarHeight+'px',
        backgroundColor: '#F5F5F5',
    }
    this.tabListStyle = {
        marginTop: this.th + this.statusBarHeight + 'px'
    }
}).exec()

部分素材资源来源网站，本站提供免费下载，如有侵权请联系站长马上删除！