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

成功解决

相关推荐
不羁的fang少年18 小时前
前端常见问题(vue,css,html,js等)
前端·javascript·css
change_fate18 小时前
el-menu折叠后文字下移
前端·javascript·vue.js
yivifu19 小时前
CSS Grid 布局详解(2025最新标准)
前端·css
o***Z44820 小时前
前端性能优化案例
前端
张拭心20 小时前
前端没有实际的必要了?结合今年工作内容,谈谈我的看法
前端·ai编程
姜太小白20 小时前
【前端】CSS媒体查询响应式设计详解:@media (max-width: 600px) {……}
前端·css·媒体
HIT_Weston20 小时前
39、【Ubuntu】【远程开发】拉出内网 Web 服务:构建静态网页(二)
linux·前端·ubuntu
百***060120 小时前
SpringMVC 请求参数接收
前端·javascript·算法
天外天-亮21 小时前
Vue + excel下载 + 水印
前端·vue.js·excel
起个名字逛街玩21 小时前
前端正在走向“工程系统化”:从页面开发到复杂产品架构的深度进化
前端·架构