uniapp获取组件距离顶部距离，还有遇到的一些坑

uni  
  .createSelectorQuery()  
  .in(this)  
  .select(".container .cat-box")  
  .boundingClientRect((data) => {  
    this.pageScroll = data.top;  
  })  
  .exec();  

data回调参数包括了组件的一些信息，包括距离头部的距离

 

使用这个方法获取距离时 有两个条件：
1、在onReady或者mounted中使用；
2、保证前面的图片高度设置好了，因为uni-image有个默认高度为 height: 240px ，容易造成偏差；

3、正常情况下this指的应该是该方法mounted或onReady所在的vue元素，然而在wx小程序中，输出的this并未指向这个vue元素，即el为none，那么问题来了，this.pageScroll = data.top; 将无法获取想要的信息，解决方法：

const that = this
uni  
  .createSelectorQuery()  
  .in(this)  
  .select(".container .cat-box")  
  .boundingClientRect((data) => {  
    that.pageScroll = data.top;  
  })  
  .exec();