uniapp 动态获取元素的宽高等信息

前提 下面方法需要在生命周期 mounted 后进行调用。nvue 请看uniapp官网解决方式
官网例子链接：节点信息 https://uniapp.dcloud.io/api/ui/nodes-info?id=createselectorquery

完整代码示例

const query = uni.createSelectorQuery().in(this);
query.select('#id').boundingClientRect(data => {
    
    
  console.log("得到布局位置信息" + JSON.stringify(data));
  console.log("节点离页面顶部的距离为" + data.top);
  console.log(data.height); // 获取元素宽度
}).exec();

1.使用 uni.createSelectorQuery() 获取 SelectorQuery 对象实例

const query = uni.createSelectorQuery().in(this);

2.使用 selectorQuery.select(selector) 获取 NodesRef 对象实例

在当前页面下选择第一个匹配选择器 selector 的节点，返回一个 NodesRef 对象实例，可以用于获取节点信息。
selector 说明：

selector 类似于 CSS 的选择器，但仅支持下列语法。

ID选择器：#the-id
class选择器（可以连续指定多个）：.a-class.another-class
子元素选择器：.the-parent > .the-child
后代选择器：.the-ancestor .the-descendant
跨自定义组件的后代选择器：.the-ancestor >>> .the-descendant
多选择器的并集：#a-node, .some-other-nodes

 const nodesRef = query.select('#id');

3.使用 nodesRef.boundingClientRect(callback)

添加节点的布局位置的查询请求。相对于显示区域，以像素为单位。其功能类似于 DOM 的 getBoundingClientRect。返回 NodesRef 对应的 SelectorQuery。
callback 返回参数

属性 类型 说明
id String 节点的 ID
dataset Object 节点的 dataset
left Number 节点的左边界坐标
right Number 节点的右边界坐标
top Number 节点的上边界坐标
bottom Number 节点的下边界坐标
width Number 节点的宽度
height Number 节点的高度

nodesRef.boundingClientRect(data => {
    
    
  console.log("得到布局位置信息" + JSON.stringify(data));
  console.log("节点离页面顶部的距离为" + data.top);
  console.log(data.height); // 获取元素宽度
}).exec();