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

成功解决

相关推荐
前端加油站13 分钟前
在 cursor 成为流行的开发方式后,作为普通开发我们能做什么
前端
Cache技术分享21 分钟前
163. Java Lambda 表达式 - Function 的链式组合
前端·后端
柯南952733 分钟前
Vue 3 响应式系统源码解析
vue.js
Zestia38 分钟前
页面点击跳转源代码?——element-jumper插件实现
前端·javascript
前端小白199538 分钟前
面试取经:工程化篇-webpack性能优化之优化loader性能
前端·面试·前端工程化
PineappleCoder38 分钟前
大小写 + 标点全搞定!JS 如何精准统计单词频率?
前端·javascript·算法
zhangbao90s40 分钟前
Web组件:使用Shadow DOM
前端
hhy前端之旅40 分钟前
语义版本控制:掌握版本管理的艺术
前端
coding随想40 分钟前
深入浅出DOM操作的隐藏利器:Range(范围)对象——掌控文档的“手术刀”
前端
前端小白199541 分钟前
面试取经:工程化篇-webpack性能优化之减少模块解析
前端·面试·前端工程化