uni-app 小程序中的定位问题以及页面安全距离

最新推荐文章于 2025-07-09 15:14:28 发布

halo1416

最新推荐文章于 2025-07-09 15:14:28 发布

阅读量1k

点赞数 5

CC 4.0 BY-SA版权

分类专栏：小程序文章标签： uni-app 小程序

本文链接：https://blog.csdn.net/halo1416/article/details/147513889

小程序专栏收录该内容

16 篇文章

订阅专栏

uni-app 小程序定位问题

一、问题描述：页面上定位偏移

最近接到一个需求，在小程序首页写一个新手引导。
具体内容就是：整个页面背景黑色半透明蒙层，首页上的某几个按钮需要高亮显示（有一些引导提示语指向按钮）

1. 我的问题

ps: 写之前没想到有兼容问题，太大意了；写完成了自测才发现，emo~

最开始，我是直接新写了一个组件，全屏、背景黑色半透明蒙层；然后把要高亮的按钮写出来，通过定位将这些按钮定位到页面以前的位置上；但是，不管我是用rpx或者%或者vh，后面我又考虑了安全距离的问题。但是在不同机型上还是或多或少又问题

2. 解决方案

2.1 方案一：能用
在首页（父组件）中获取到要高亮元素的文职，并且传递给蒙层组件，然后在蒙层组件中通过定位将元素定位到指定位置。而如果又引导线，提示语等，都基于这个元素去定位、移动即可

缺点：
如果存在引导线，提示语等，基于高亮元素去定位，在不同机型（特别是比较老的机型）上可能以一点的便宜，但不会很大，定位的时候留足空间，不要重叠即可

怎么获取元素的位置

const query = uni.createSelectorQuery().in(this);
query.select(".editIcon").boundingClientRect((data) => {
  console.log("得到布局位置信息" + JSON.stringify(data));
  console.log("节点离页面顶部的距离为" + data.top);
}).exec();

2.2 方案二：效果最好，但开发量较大，可视实际情况选用
使用蒙版镂空定位，方法如下：

父组件（首页），整体 z-index: 1
子组件（蒙层组件），只负责蒙层和逻辑部分，判断当前需要显示那个高亮元素，回传到父组件（this.$parent.xxx = xxx 或者其他通信方案），然后再父组件中通过这个变量去判断 z-index: 2
父组件（首页），父组件中通过这个变量去判断，当时是否高亮显示元素 z-index: 3 这样这个元素就显示在蒙层之上了

缺点：

元素需要写两套（通过变量判断是否展示蒙层，具体展示什么内容）；一套原本正常的元素，一套蒙层高亮元素
如果高亮元素较多的话，会改动较大

注意：z-index的用法

只有在元素的position属性值为 relative, absolute, fixed或sticky（即非static） 时才会起作用
父元素的z-index属性值必须小于子元素的z-index属性值并且也要有position属性值（非static）

二、小程序上的安全距离

safeAreaInsets 安全距离：主要指的是在全面屏手机（如 iPhone X 及以上型号）上，屏幕顶部和底部为了容纳刘海屏或前置摄像头而预留的安全区域。（iPhone X 之前和大部分安卓机是没有的，为0）

1. 怎么获取安全距离

uni.getSystemInfo({ // 获取窗口信息
  success: (res) => {
    this.topSafeDistance = res.safeArea.top; // 顶部安全区域距离
  }
})

safeAreaInsets 的结构

参数	类型	说明
left	Number	安全区域左侧插入位置
right	Number	安全区域右侧插入位置
top	Number	安全区顶部插入位置
bottom	Number	安全区域底部插入位置