uni.createSelectorQuery()获取组件位置出现NaN问题及解决方法

uni.createSelectorQuery() 获取组件位置出现 NaN 问题及解决方法

在使用 uni.createSelectorQuery().select('#searchId').boundingClientRect() 获取组件位置时，有时会遇到打印出来的组件位置为 NaN 的问题。

问题原因：

这个问题可能是由于上下文的改变导致的。在回调函数中，this 指针可能不再指向期望的对象，从而导致无法获取到正确的值。

解决方法：

将当前的 this 对象存储到一个变量中，然后在回调函数中使用这个变量来访问正确的对象。

代码示例：

var that = this;
uni.createSelectorQuery().select('#searchId').boundingClientRect(function(rect) {
    console.info('rectttttttt', rect);
    
    // let searchBottom = rect.bottom;
    that.screenTop = parseFloat(that.screenHeight) - parseFloat(rect.bottom);
    console.log('组件在屏幕上的位置：', that.screenTop);
}).exec();

解释：

• 使用 var that = this; 将当前的 this 对象存储到 that 变量中。
• 在回调函数中使用 that 变量访问 screenHeight 属性，从而确保能够正确获取到组件在屏幕上的位置。

通过这种方法，就可以避免 NaN 问题的出现，并正确获取到组件在屏幕上的位置。