首页 > 建站教程 > 前端框架 >  uniapp $el以及createSelectorQuery获取组件的宽高、offsetWidth等正文

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()