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

成功解决

相关推荐
二两锅巴6 小时前
📺 无需Electron!前端实现多显示器浏览器窗口精准控制与通信
前端
炸土豆6 小时前
防抖节流里的this传递
前端·javascript
用户4099322502126 小时前
Vue3中动态样式数组的后项覆盖规则如何与计算属性结合实现复杂状态样式管理?
前端·ai编程·trae
山璞6 小时前
Flutter3.32 中使用 webview4.13 与 vue3 项目的 h5 页面通信,以及如何调试
前端·flutter
努力早日退休6 小时前
Antd Image标签父元素会比图片本身高几个像素的原因
前端
林希_Rachel_傻希希6 小时前
手写Promise--教学版本
前端·javascript·面试
ETA86 小时前
`console.log([1,2,3].map(parseInt))` 深入理解 JavaScript 中的高阶函数与类型机制
前端·javascript
呼叫69456 小时前
图片列表滚动掉帧的原因分析与解决方案
前端
3秒一个大6 小时前
现代前端开发框架的工程化实践:基于 Vite 与 Vue3
vue.js
狗哥哥6 小时前
AI 驱动前端自动化测试:一套能落地、能协作、能持续的工程化方案
前端·测试