Uni-App 获取组件在手机屏幕上的位置详解

要获取某个组件在手机屏幕上的位置，可以使用 Uni-app 提供的 API 和一些 JS 方法来实现。

首先，需要获取该组件在页面中的位置，可以使用 uni.createSelectorQuery() 方法来获取组件的位置信息。然后，再通过 uni.getSystemInfoSync() 方法获取手机屏幕的信息，包括屏幕的宽度和高度。

接下来，可以使用一些 JS 方法来计算组件在屏幕上的位置。可以使用组件在页面中的位置和手机屏幕的信息来计算。

具体实现步骤如下：

在页面的 onReady 生命周期函数中，使用 uni.createSelectorQuery() 方法获取组件的信息。例如，获取组件的 id 为 'myComponent'：

uni.createSelectorQuery().select('#myComponent').boundingClientRect(function(rect) {
  console.log(rect);
}).exec();

使用 uni.getSystemInfoSync() 方法获取手机屏幕的信息：

var systemInfo = uni.getSystemInfoSync();
var screenWidth = systemInfo.windowWidth;
var screenHeight = systemInfo.windowHeight;

使用 JS 方法计算组件在屏幕上的位置。根据组件在页面中的位置信息和屏幕的信息，可以计算出组件在屏幕上的位置：

var componentTop = rect.top; // 组件在页面中的上边位置
var componentLeft = rect.left; // 组件在页面中的左边位置

var screenTop = screenHeight - componentTop; // 组件在屏幕上的上边位置
var screenLeft = componentLeft; // 组件在屏幕上的左边位置

console.log('组件在屏幕上的位置：', screenTop, screenLeft);

通过以上步骤，就可以获取到某个组件在手机屏幕上的位置信息。

需要注意的是，uni.createSelectorQuery() 和 uni.getSystemInfoSync() 方法都是异步方法，需要在回调函数中处理获取到的结果。另外，由于屏幕的宽度和高度可能会根据手机设备的不同而有所不同，因此需要根据实际情况进行适配。