uniapp获取组件到屏幕的距离

要获取组件到屏幕的距离，可以使用uni-app提供的API uni.createSelectorQuery()，再调用boundingClientRect()方法获取组件的位置信息。

具体实现步骤如下：

1. 获取组件的选择器，如：'#myComponent'

2. 调用uni.createSelectorQuery()方法创建查询对象

3. 调用boundingClientRect()方法获取组件的位置信息

4. 调用exec()方法执行查询

5. 在查询的回调函数中获取组件的位置信息

示例代码如下：

uni.createSelectorQuery().select('#myComponent').boundingClientRect(function(rect){
  console.log(rect.top); //组件距离顶部的距离
  console.log(rect.left); //组件距离左侧的距离
}).exec();

注意：上述代码需要在组件渲染完成后执行，可以在组件的mounted()生命周期函数中调用。

相关问题

uniapp组件内距离调整

### 如何在 UniApp 组件中设置和调整元素之间的距离

#### 使用内置 CSS 变量处理边距问题
对于适配不同设备的边距问题，推荐使用 UniApp 提供的内置 CSS 变量来动态调整边距。这能确保布局的一致性和响应性。

.fixed {
    position: fixed;
    top: var(--window-top);
    right: var(--window-right);
    bottom: var(--window-bottom);
    left: var(--window-left);
}

这种方式利用了框架预设好的窗口边界变量，使得开发者无需手动测量即可实现精准定位[^1]。

#### 调整内边距防止内容遮挡
当遇到像 `uni-collapse` 这样的可折叠组件时，如果存在底部固定按钮或其他控件可能会覆盖住部分显示区域，则可以通过给最外层容器添加额外的下部填充(`padding-bottom`) 来预留足够的空间让所有子项都能正常展示而不受干扰。

.uni-collapse {
    padding-bottom: 100px; /* 确保最下面的内容有足够的空间 */
}

此方法简单有效，在不改变原有结构的前提下解决了视觉上的重叠问题[^2]。

#### 控制输入框行为优化用户体验
针对含有弹出层 (`u-popup`) 和表单字段的应用场景，有时会面临软键盘弹起导致界面错乱的情况。此时应合理配置相关属性以改善交互体验：

- 设置 `focus="true"` 让指定输入域获得初始焦点；
- 将 `adjustPosition` 属性置为 `false` 避免默认情况下整个视图随键盘升起而移动；
- 利用事件监听机制捕获并响应键盘高度变化，进而精确控制特定 DOM 元素的位置或尺寸适应新的可用屏幕范围。

// 延迟执行函数模拟异步操作完成后再获取焦点
setTimeout(() => this.$refs.input.focus(), 300);

// 关闭页面跟随键盘滚动的功能
this.adjustPosition = false;

// 动态调整页面其他部分内容以应对键盘出现带来的影响
onKeyboardHeightChange(height) {
    document.querySelector('.custom-element').style.height = `${height}px`;
}

以上策略不仅有助于维持良好的UI/UX设计原则，同时也提高了应用的整体稳定性和兼容性表现[^3]。

uniapp 获取手机浏览器底部高度

### 如何在 UniApp 中获取手机浏览器底部（如导航栏）的高度

#### 使用 `uni.getSystemInfo` 方法
为了动态适应不同设备屏幕尺寸和状态栏高度，可以利用 `uni.getSystemInfo` 接口来获取系统的相关信息。此方法能够返回关于当前操作环境的各种参数，其中包括安全区域的信息。

export default {
  onLaunch: function () {
    this.setAppInfo();
  },
  methods: {
    setAppInfo() {
      uni.getSystemInfo({
        success(res) {
          const { safeAreaInsets } = res;
          Vue.prototype.safeBottomInset = safeAreaInsets.bottom || 0; // 底部内边距
        }
      });
    }
  }
}

上述代码片段展示了如何通过调用 `uni.getSystemInfo` 来取得包含底部内边距在内的系统信息[^2]。

#### CSS 自动适配方案
对于 H5 页面来说，还可以借助 CSS 变量配合媒体查询的方式处理页面布局中的固定定位元素被原生导航条遮盖的问题：

/* 定义全局变量 */
html, body {
  margin: 0;
  padding: 0;
}

.fixed-bottom-box {
  height: 140rpx;
  position: fixed;
  bottom: env(safe-area-inset-bottom); /* iOS 系统的安全区留白 */
  left: 0;
  width: 100%;
}

这里使用了 `env()` 函数指定组件距离视窗底端的距离应等于操作系统提供的安全区内边距值，从而确保即使存在虚拟按键也不会影响到网页内容显示[^4]。

#### 结合 JavaScript 和 CSS 解决方案
如果希望更灵活地控制界面行为，则可以在初始化阶段先读取一次系统信息保存至 Vuex store 或者 global property 当中供后续逻辑判断；同时也可以考虑编写一个通用 mixin 组件用于监听窗口大小变化事件以便实时调整样式设置。