【Uniapp-Vue3】解决uni-popup弹窗在安全区显示透明问题

最新推荐文章于 2025-06-02 10:53:59 发布

原创最新推荐文章于 2025-06-02 10:53:59 发布 · 1.3k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#uni-app #vue.js #前端

Uniapp 专栏收录该内容

70 篇文章

订阅专栏

我们在使用uni-popup时，如果想要给弹出内容添加一个背景颜色，我们会发现在安全区域是不显示该背景颜色的。

首先根据如下的目录结构找到uni-popup.vue文件

在该文件中找到bottom配置，将红箭头所指代码注释掉

下面的安全区域就没有了，但是还没解决完。

在弹出区域下面加上一个类名为safe-area-bottom的盒子：

在CSS中进行配置：

// 底部安全区域
.safe-area-bottom{
	width: 100%;
	height: env(safe-area-inset-bottom);
	background-color: #fff;
}

成功解决

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

永久旅途

关注关注

12
点赞
踩
1

收藏

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

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

uni-app实战之社区交友APP（9）我的页面开发

CUFEECR的博客

02-04

4089

个人中心页面需要配置导航栏标题、菜单按钮等；个人中心需要实现顶部个人信息栏、互动信息栏、广告位、浏览历史、社区认证和审核帖子，使用uni-list-item组件；设置页入口是个人中心页面。修改密码页面入口在设置页；需要验证后两次密码相同；修改邮箱页面入口也是设置页，需要验证邮箱格式。编辑资料页也使用uni-list-item实现；修改头像使用图片上传接口实现；修改昵称使用输入框，修改性别、情感和职业使用接口；修改生日使用picker组件；城市选择使用三级联动城市选择器。开发帮助反馈页面；开发关于页面。

uniapp使用uni-popup做底部弹出选项（vue3）

qq_46131497的博客

09-03

2675

效果图。

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

【uniapp vue3学习】解决uni-popup弹出层出现，列表还能滚动

qq_34093387的博客

11-27

1780

【代码】【uniapp vue3学习】解决uni-popup弹出层出现，列表还能滚动。

uni-ui实现信息提示

810cheng

06-02

450

UniApp实现页面交互

uniapp使用u-popup组件弹窗出现页面还可滑动

weixin_53339757的博客

01-31

3604

解决u-popup出现遮罩层页面滑动问题

uniapp+vue3 使用uni-popup uni-popup-dialog 弹窗对话框,进页面就会弹出软键盘,解决方法如下

weixin_57986195的博客

06-17

2145

解决uni-popup-dialog进页面就弹软键盘

Vue3使用Uni-ui的popup弹出层组件

a4867的博客

09-08

1191

除了文档中要求的aleterDialog外，还得利用v-if设置一个isDialog判断。由于uni-ui中有些组件文档的基于vue2编写的，比如popup组件。下面是vue3的写法。

uni-popup在vue3获取不到open()方法

m0_62665400的博客

04-29

1973

报错【TypeError: Cannot read property 'open' of null】

uniapp vue3 如何调用uni-popup组件的this.$refs.xxx.close()

guoqing的博客

07-08

8624

uniapp vue3 如何调用uni-popup组件的this.$refs.xxx.close(), 在uniapp使用vue3进行开发时，使用了uni-popup弹框，但是在对弹框进行操作的时候，发现调用`this.$refs.xxx.close()`报错`Cannot read property '$refs' of undefined`......

Uni-app 笔记二 (项目笔记)

u014105655的博客

01-29

852

Uniapp 项目笔记

uniapp 自定义键盘基于uni-popup

学吧

03-04

1049

【代码】uniapp 自定义键盘基于uni-popup。

uni-data-select 遮挡显示不全，怎么用穿透的办法解决

最新发布

06-04

通过分析引用内容和UniApp特性，解决`uni-data-select`组件显示被遮挡问题的核心方案是利用 **CSS深度选择器** 和 **布局调整**，以下是具体步骤： --- ### 解决方案 #### 1. 使用深度选择器穿透组件样式（关键...

uni-popup点击弹窗外区域怎么触发

05-07

更安全的方式是使用uniapp的事件处理，比如在弹窗组件外部包裹一个view，并捕获点击事件，但需要注意事件冒泡。或者，用户可以在打开弹窗时，动态设置一个全局的点击监听，当点击发生时判断是否在弹窗内部，如果是...

uniapp中uni-popup的用法

高性价比服务器就选：蓝易云

07-25

3472

通过按照以上步骤，你可以在UniApp中使用uni-popup组件来实现弹出层的功能。请根据你的具体需求，使用uni-popup提供的属性和方法来定制和控制弹出层的样式和行为。在UniApp中，uni-popup是一个用于弹出层的组件，用于显示各种弹窗、模态框和提示框。uni-popup组件提供了一些属性和事件，用于配置和控制弹出层的样式和行为。可以在组件标签上使用这些属性和监听这些事件。在页面中，可以通过this.$refs来访问uni-popup组件的实例，并使用它提供的方法来控制弹出层的显示和隐藏。

uniapp 使用vue3写法，拿不到uni-popup的ref

m0_55557411的博客

01-07

1668

场景：在之前都是可以正常运行的，今天突然发现编译成支付宝小程序，下面代码获取不到弹窗的ref。后面又安装了uview-plus，使用它的弹窗也不行（编译成微信小程序不受影响）。降低node和HBuilderX版本都试过了没有效果，最后新开了一个demo，发现又正常了，经排查是根目录生成了一个新文件【使用popup.value.open('center') 控制条报错，popup.value 打印结果为空。二：查看根目录有没有这个文件，删除mini.project.json即可。

uniapp实战 —— 弹出层 uni-popup (含vue3子组件调父组件的方法)

朝阳39的博客

12-08

2959

/ 子组件调父组件的方法const'close'void</</</</</</</</</</</</</</</padding;;position;;.title;padding;text-align;font-size;;;color;right;top;.dt;font-size;color;;position;width;

【问题解决】uniapp-Vue3中u-popup滑动页面穿透问题

z914020826的博客

08-13

2840

在我们用uniapp写小程序或者APP的时候，有时候会用到一些弹出框组件。但在弹出框内部滑动会引起整个页面的滑动，让整个页面看起来不是和很好。

UniApp弹窗uni-popup使用

LOVE_mingjing的博客

11-11

4752

由于不懂怎么使用nvue的弹窗，所以写下

uniapp vue3怎么调用uni-popup组件的this.$refs.message.open() ?

qzmlyshao的博客

02-05

2390

然后调用的时候报错会出现错误。

uniapp uni-popup vue3

02-10

### 如何在Vue3中使用UniApp的uni-popup组件 #### 安装依赖项为了能够在项目中使用 `uni-popup` 组件，首先需要安装 UniApp 的 CLI 工具以及初始化一个新的 UniApp 项目。如果已经拥有一个现成的 Vue3 和 UniApp 集成环境，则可以跳过这一步。对于新项目的创建，可以通过命令行工具执行如下操作来快速搭建开发框架[^1]: ```bash vue create my-project-name cd my-project-name npm install @dcloudio/uni-app -S ``` #### 导入并注册uni-popup组件为了让应用程序能够识别和渲染 `uni-popup`，需将其导入到页面或全局配置文件内，并完成必要的声明工作。通常情况下，在单页应用(SPA)模式下推荐局部引入的方式；而对于多页面(MPA)，则更适合采用全局方式加载该插件[^2]。以下是通过脚本标签形式直接嵌套于目标.vue 文件中的实例代码片段： ```html <template>  </template> <script setup lang="ts"> import { ref } from 'vue'; // 局部注册 uni-popup 组件 import Popup from '@/components/uni-popup/uni-popup.vue'; const showPopup = () => { popupRef.value.open(); }; const closePopup = () => { popupRef.value.close(); }; const popupRef = ref(null); </script> <template> <view class="content"> <button type="primary" @click="showPopup">显示popup</button> <Popup ref="popupRef"></Popup> </view> </template> ``` 上述例子展示了如何定义两个方法 (`showPopup`, `closePopup`) 来控制弹层的状态切换逻辑，同时也说明了怎样利用模板语法绑定事件处理器实现交互功能[^3]。 #### 自定义样式与属性设置除了基本的功能外，还可以根据实际需求调整 `uni-popup` 外观特性及其行为参数。比如改变背景颜色、指定动画效果类型或是设定初始宽度高度等。这些自定义选项都可以作为 props 传递给子组件来进行个性化定制[^4]。例如修改默认关闭按钮图标位置： ```html <Popup :mask-closeable="false" position="bottom" custom-style="border-radius: 8px;" title="提示信息" icon-position="left"> </Popup> ```