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