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

成功解决

相关推荐
扎量丙不要犟1 小时前
跨平台的客户端gui到底是选“原生”还是web
前端·javascript·c++·qt·rust·electron·tauri
字节全栈_rJF2 小时前
Flutter Candies 一桶天下
前端·javascript·flutter
○陈2 小时前
vue面试题|[2025-2-1]
前端·javascript·vue.js
Orange3015112 小时前
React 19 新特性探索:提升性能与开发者体验
前端·javascript·react.js
来一碗刘肉面3 小时前
Vue- 组件通信2
前端·javascript·vue.js
hhmy1234565 小时前
表格结构标签
java·服务器·前端
喵叔哟5 小时前
5. 【Vue实战--孢子记账--Web 版开发】-- 主页UI
前端·vue.js·ui
鱼骨不是鱼翅5 小时前
Spring Web MVC基础第一篇
前端·spring·mvc
海威的技术博客6 小时前
手写MVVM框架-环境搭建
vue.js·前端框架·响应式前端框架