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

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

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

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

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

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

在CSS中进行配置:

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

成功解决

相关推荐
shughui4 小时前
Fiddler下载、安装、使用、汉化,详细图文教程(2026附安装包)
前端·测试工具·fiddler
阿帕琪尔4 小时前
😎vite插件: 自动打包压缩图片和转webp(二)
前端·vite
思慕很大很大4 小时前
浏览器基础知识-进程与线程
前端·浏览器
猩猩程序员4 小时前
dial9:一个强悍的 Tokio 调试工具!!!
前端
gyx_这个杀手不太冷静5 小时前
OpenCode 深度解析:架构设计、工具链集成与工程化实践
前端·架构·ai编程
m0_459252465 小时前
fastadmin动态渲染统计信息
开发语言·前端·javascript·php
该怎么办呢5 小时前
Source/Core/Matrix4.js
前端·javascript
小江的记录本5 小时前
【MyBatis-Plus】Spring Boot + MyBatis-Plus 进行各种数据库操作(附完整 CRUD 项目代码示例)
java·前端·数据库·spring boot·后端·sql·mybatis
console.log('npc')5 小时前
响应式布局的 Element UI、Ant Design 24栅格布局
vue.js·ui
于慨6 小时前
Capacitor
前端