【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;
}

成功解决

相关推荐
智驾12 分钟前
uniapp,自绘仪表盘组件(基础篇)
uni-app·仪表
工业互联网专业14 分钟前
基于SpringBoot+Vue的工商局商家管理系统
vue.js·spring boot·毕业设计·源码·课程设计·工商局商家管理系统
前端双越老师24 分钟前
【万字总结】2025 前端+大前端+全栈 知识体系(下)
vue.js·react.js·node.js
江小年24 分钟前
Vue3、vue学习笔记
前端·javascript·vue.js
晓得迷路了1 小时前
栗子前端技术周刊第 71 期 - Angular 19.2、TypeScript 5.8、Trae 国内版发布...
前端·javascript·trae
David+Zhao1 小时前
vue项目纯前端把PDF转成图片并下载
前端·vue.js·pdf·canvas·pdf转图片·pdfjs·pdfjs-dist
好_快1 小时前
Lodash源码阅读-类型判断部分总结
前端·javascript·源码阅读
恋猫de小郭2 小时前
再聊 Flutter Riverpod ,注解模式下的 Riverpod 有什么特别之处,还有发展方向
android·前端·flutter
Aress"2 小时前
【2025前端高频面试题——系列一之MVC和MVVM】
前端·mvc
Json____2 小时前
好玩的谷歌浏览器插件-自定义谷歌浏览器光标皮肤插件-Chrome 的自定义光标
前端·chrome·谷歌插件·谷歌浏览器插件·光标皮肤·自定义光标