首先明白一点,uni-app提供的view、button、image、text通通都是组件,不是h5的标签,虽然用起来方便,但如果你想获取dom节点信息,尽管给组件绑定一个id选择器,用document.getElementById()等这种传统的JS获取dom方式是没有任何效果。
因为他们是组件,除非你不用这些现成的组件,用回h5的标签。
所以你如果想获取uni-app提供组件的DOM元素,需要如下的方法。
uni.createSelectorQuery().in(this);用于创建一个实例。
in(this)在这里是为了规范页面创建实例,避免获取不到实例报null,用上总没错
query.select('#text')用于选择DOM节点
boundingClientRect()返回dom节点的相关信息
拿到的是一些元素本身的宽高信息、距离页面四边的距离。
使用uni.createSelectorQuery()创建dom实例,需要在这个mounted()生命周期里面进行,这个生命周期它代表组件已经创建完成,可以挂载实例,进而获取dom元素
<template>
<text id="text">发送</text>
</template>
-------------------------------------------------------------------------------------
mounted() {
const query = uni.createSelectorQuery().in(this);
query.select('#text').boundingClientRect(data => {
console.log(data)
}).exec();
},
如果不写在mounted生命周期里,你也可以写在methods方法定义里面,不过你需要这样来调用。
mounted() {
this.getDomEle()
},
methods: {
getDomEle() {
const query = uni.createSelectorQuery().in(this);
query.select('#text').boundingClientRect(data => {
console.log(data)
}).exec();
}
}