uniapp中Popup弹出层底部空隙问题（手把手图解）

最新推荐文章于 2025-05-03 07:02:31 发布

走出半生的少年

最新推荐文章于 2025-05-03 07:02:31 发布

阅读量6.6k

点赞数 23

分类专栏： uniapp 微信小程序文章标签：前端 javascript 开发语言

本文链接：https://blog.youkuaiyun.com/m0_55258023/article/details/126342160

版权

在uniapp开发中遇到Popup底部弹出时存在间隙的问题，该问题只在iPhone X系列设备上出现。通过查看组件源码，在第350行将特定代码注释掉，成功解决了底部空隙问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在开发uniapp项目中，我们会使用到popup弹出层

Popup弹出层的弹出方式分为一下几种

top	顶部弹出
center	居中弹出
bottom	底部弹出
left	左侧弹出
right	右侧弹出
message	预置样式：消息提示
dialog	预置样式：对话框
share	预置样式：底部弹出分享示例

我遇到的问题是底部弹出层有一个间隙的问题

在iPhone 5/6/7/8中并不会出现这样的问题

但是在iPhone X/XR/12/13中会出现这样的问题

如图

解决方案

我开始在网上，百度，csdn，博客园找解决方案。

可能是我搜索的问题，并没有找到解决方案。

于是，我就去看这个ui库中这个组件的源码。

我该了源码，这个问题就解决了。

如图

首先找到Popup的源码

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

走出半生的少年

关注关注

23
点赞
踩
34

收藏

觉得还不错? 一键收藏
25
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

uniapp uni-popup弹出层组件弹窗无法弹出自定义样式问题

jiey0407的博客

02-23

1522

uni-popup弹出层组件之前用到弹出层组件时发现弹出时会有一层灰色的遮罩，后来调试了几次发现是因为没有自定义给弹出层宽高，尝试了几次终于做到自己想要的效果，话不多说，直接附上完整代码：效果图： <template> <view> <view class="sign_text" @tap="toggle('center')"> <text style="line-height: 60px;margin-top: 12px;">点击弹出&lt

uniapp中Popup弹出层底部空隙问题（ios手机）

baidu_38492843的博客

11-12

411

给uni-popup标签加 :safe-area='false' 属性。

25 条评论您还未登录，请先登录后发表或查看评论

关于uniapp小程序在苹果手机会出现的问题

shika233的博客

02-25

3669

笔记 1、uni-app 底部安全距离问题参考uni-app底部安全距离遮挡以及底部tabbar距离 // ios底部安全距离-padding .savepadding{ padding-bottom: constant(safe-area-inset-bottom); padding-bottom: env(safe-area-inset-bottom); box-sizing: content-box; } // ios底部安全距离-bottom .savebottom

7.17.uni-popup弹窗层制作弹出信息内容效果

最新发布

学习java的大雪笙一枚

05-03

242

2.从底部弹出，我们设置uni-Popup的type为bottom,使用设置ref值，必须。1.vue3的打开弹窗方法如2.2代码，跟vue2不同，这是一个重要的点。3.里面下载导入使用了uni-rate组件。

苹果小程序 uni-popup 弹出层显示底部弹框会有镂空

weixin_57653786的博客

08-06

1792

在其添加:safe-area='false',可以解决这一问题。

uni-app ios系统uni-popup底部有空隙问题解决

qq_43213081的博客

02-26

382

uni-app 在苹果系统(ios)，uni-popup弹窗没有靠底部

uniApp解决ios app真机底部安全区域（空白）问题

桃桃雾的博客

01-10

2352

uniApp解决ios app真机底部安全区域（空白）问题。

uniapp-微信小程序page底部有空白，高度随内容自适应，底部无法固定

weixin_47338877的博客

04-14

2610

uniapp-微信小程序page高度随内容自适应，底部有空白，底部无法固定欢迎使用Markdown编辑器在做微信小程序时，page如果没有设置最小高度，那么高度会随着内容而自适应，但是需求是在底部有一个按钮，无论页面内容如何变化，都位于内容的最下面。如果只是撑大page 若page高度<100% 那么按钮只是在page底部而不是屏幕刚开始想到的是绝对定位，但放下如果page的内容过多，会覆盖到按钮上。代码 page{ height: 100%; } .tmpl_mobile{

uni-app页面下方空白解决方案

qq_43644046的博客

03-09

5664

uniapp开发app时候，出现了空白，即使html,body设置100%也没用，情况如图下方空白之跟随着详情介绍的内容自由变化背景色于是我把详情介绍这个<view>添加了class，设置了padding-buttom:150rpx,大家可以适量取值于是也算成功但是这也有弊端，因为详情介绍长短不一，设置过小会出现空白，如果设置过长，会导致页面下面多了有背景色的空缺。这是比较简单的方式，还有个比较好的思路，判断一下界面长度，如果超出界面就设置100%，如果没有超出，

在vant中使用时间选择器和popup弹出层的操作

01-21

我就废话不多说了，大家还是直接看代码吧~ 选择日期 value=datetime click=showDatePicker> <van-popup v-model=showDatePicker position=bottom :style={ h

问题记录：uni-app框架 APP 在首页使用组件uni-popup并设置在底部显示时，出现被tab-bar遮盖问题。

web__bug的博客

08-26

737

使用uni.hideTabBar()，隐藏底部tabbar。使用uni.showTabBar()，显示底部tabbar。

uniapp uni-popup底部弹框留白底部颜色修改滚动穿刺

青杉旧故°的博客

08-29

1111

uni-popup底部弹框留白底部颜色修改滚动穿刺

uniapp底部弹出层(uni-popup)使用技巧

m0_63553261的博客

03-01

5943

uniapp底部弹出层(uni-popup)使用技巧

前端开发工作中可能会遇到的问题及解决方法

Bonsoir777的博客

09-14

3360

本文主要分享前端开发工作中可能会遇到的问题及解决方法

解决图片底部有空白空隙问题

qq_37875903的博客

09-27

1209

原因：图片底部默认和文字的基线对齐，所以会有空白间隙解决方法： 1.给图片设置vertical-align属性： vertical-align:middle/bottom/top; 2.把图片转换成块级元素： display:block;

uniapp进阶uniPay微信小程序商城uniCloud云开发APP

06-30

课程亮点：纯前端实现H5、小程序、APP商城开发；技术栈：uniapp+uniCloud+unipay+uni-ui+uView+vuex；学完可开发定制化商城，web前端技术再进阶一大步；知识模块：1.uniapp+unicloud云开发2.uniapp常用组件库及官方扩展UI库3.uView第三方UI组件库4.unicloud云开发实践，管理校验token权限5.vuex状态管理module模块商业级使用6.uni-id微信一键登录及手机验证码登录7.开通微信支付及支付宝支付的全流程操作，unipay的实战

uni-app:实现点击按钮出现底部弹窗（uni.showActionSheet+自定义）

weixin_46001736的博客

08-07

9290

uni-app:实现点击按钮出现底部弹窗（uni.showActionSheet+自定义）

uniapp如何实现底部弹出选择框

m0_60708088的博客

05-19

4371

性别、班级、日期

【工作总结】——小程序开发中底部弹窗在iPhone X中的安全距离问题

m0_50785976的博客

07-01

2395

小程序底部弹窗距离底部的安全距离问题

uniapp的popup底部弹出层怎么使用

01-10

### 如何在 UniApp 中实现并使用从屏幕底部弹出的 Popup 组件 #### 创建和配置 `uni-popup` 组件为了使 `uni-popup` 从屏幕底部弹出，需要设置其模式为 `bottom` 并调整相应属性以确保良好用户体验。 ```html ...