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

成功解决

相关推荐
孟祥_成都7 分钟前
nextjs 16 基础完全指南!(一) - 初步安装
前端·next.js
程序员爱钓鱼7 分钟前
使用简单 JSON + 自定义 t 函数实现轻量多语言国际化(无需 next-intl)
前端·javascript·trae
一 乐19 分钟前
助农平台|基于SprinBoot+vue的助农服务系统(源码+数据库+文档)
前端·javascript·数据库·vue.js·ecmascript·springboot
vivo互联网技术22 分钟前
浅谈 AI 搜索前端打字机效果的实现方案演进
前端·vue·dom
●VON23 分钟前
Electron 小游戏实战:太空打砖块(Space Breakout)
前端·javascript·electron
新晨43723 分钟前
Vue 3 定时器清理的最佳实践
javascript·vue.js
重铸码农荣光24 分钟前
深入理解 JavaScript 原型机制:从“如何拿到小米 SU7”说起
前端·javascript
乐观的用户28 分钟前
搞懂虚拟列表实现原理与步骤
前端·vue.js
Heo28 分钟前
Webpack高级之常用配置项
前端·javascript·面试
华仔啊1 小时前
10分钟搞定!SpringBoot+Vue3 整合 SSE 实现实时消息推送
java·vue.js·后端