uni.createSelectorQuery()节点信息使用

前端使用 uni.createSelectorQuery() 和boundingClientRect()可以抓取节点的位置以及宽高各种信息，可以在页面滚动及位置固定上起很大作用，但使用过程中总是返回值为null，特此记录一下。

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

 以上为官方代码，返回的节点信息以对象形式存放在对象data中；

若data返回值为空，已知晓原因有两个：

1. createSelectorQuery后没有加上in(this)，不能捕捉到所标记的节点，本人遇到的不是这个问题；

2.代码位置没有放对，代码在页面没有准备好之前开始运行，通俗的讲，就是页面还没有渲染到该节点位置，代码就已经运行了，根本没有捕捉到该选择器的节点，自然无法解析该节点，返回值打感染就是null了。

第一个很好解决，加this就行；

第二个要看具体情况，整段js代码应该放在onLoad()里面，但是可能会出现意外情况，那么可以在代码外层加一个定时器延时，可以有效避免代码执行在页面渲染前。

setTimeout(()=>{//到期后执行
    const query = uni.createSelectorQuery().in(this);
    query.select(".lessonPosition").boundingClientRect(rect=>{
        console.log("dat*********",rect);
     }).exec();
},2000)

此文章仅代表个人观点，特此记录