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

成功解决

相关推荐
itwlz几秒前
vite配置@别名,以及如何让IDE智能提示路经
开发语言·前端·javascript
lichenyang4532 分钟前
添加按钮跳转页面并且根据网站的用户状态判断是否显示按钮
开发语言·前端·javascript
皮皮高3 分钟前
itvbox绿豆影视tvbox手机版影视APP源码分享搭建教程
android·前端·后端·开源·tv
白云~️19 分钟前
table表格合并,循环渲染样式
javascript·vue.js·elementui
Hilaku21 分钟前
JavaScript 里的 !0、!1 到底是啥?聊聊那些压缩器最爱的“极简写法”
前端·javascript
iOS阿玮25 分钟前
社交的本质是价值交换,请不要浪费别人的时间。
uni-app·app·apple
全栈陈序员30 分钟前
前端文件下载常用方式详解
前端·javascript·chrome·ajax·css3·html5·safari
二十一_39 分钟前
🤖✨ ChatGPT API深度体验:让AI看懂图片、听懂语音、调用你的代码
前端·chatgpt·openai
monika_yu44 分钟前
uniapp 开发ios, xcode 提交app store connect 和 testflight内测
uni-app
Developer_Niuge1 小时前
前端批量请求失败重复弹窗的正确解决方案
前端