【Uniapp-Vue3】解决uni-popup弹窗在安全区显示透明问题

devtools/2025/2/2 14:47:44/

我们在使用uni-popup时,如果想要给弹出内容添加一个背景颜色,我们会发现在安全区域是不显示该背景颜色的。

首先根据如下的目录结构找到uni-popup.vue文件

在该文件中找到bottom配置,将红箭头所指代码注释掉

下面的安全区域就没有了,但是还没解决完。 

 

在弹出区域下面加上一个类名为safe-area-bottom的盒子:

在CSS中进行配置: 

// 底部安全区域
.safe-area-bottom{width: 100%;height: env(safe-area-inset-bottom);background-color: #fff;
}

成功解决 


http://www.ppmy.cn/devtools/155465.html

相关文章

智能门锁开发系列:从设计到实现的全面解析

01-面试大保健-智能门锁-概述 1. 项目背景 智能门锁作为物联网领域的应用之一,核心功能是开锁,但除了开锁之外,它还支持多种方式进行操作,提升了用户体验。在这篇博客中,我们将详细回顾智能门锁项目的背景、开发环境…

浅析CDN安全策略防范

CDN(内容分发网络)信息安全策略是保障内容分发网络在提供高效服务的同时,确保数据传输安全、防止恶意攻击和保护用户隐私的重要手段。以下从多个方面详细介绍CDN的信息安全策略: 1. 数据加密 数据加密是CDN信息安全策略的核心之…

大模型本地部署使用方法(Ollama脚手架工具、FisherAI浏览器大模型插件、AnythingLLM大模型集成应用平台)

一、Ollama (一)Ollama简介 Ollama是一个专为在本地环境中运行和定制大型语言模型而设计的工具。它提供简单高效的接口,用于创建、运行和管理这些模型,方便用户直接使用,也方便用作后台服务支撑其它应用程序。熟悉网…

树莓派入门笔记(二)最常用的树莓派 Linux 命令及说明_树莓派系统命令

startx #树莓派进入图形界面 df -h #统计整体磁盘情况 du -sh #单独目录点用情况 软件安装删除 sudo apt-get install 软件名1 软件名2 软件名3…… #安装软件 sudo apt-get remove 软件名1 软件名2 软件名3…… #卸载软件 sudo apt-get remove –purge 软件名1 #卸载并清除配…

【Postman接口测试】Postman的全局变量和环境变量设置

在使用Postman进行接口测试时,全局变量和环境变量的设置是非常实用的功能,它们可以帮助我们更高效地管理测试数据和配置,提高测试的灵活性和可维护性。接下来,我们将详细介绍Postman中全局变量和环境变量的设置方法,并…

Redis入门概述

1.1、Redis是什么 Redis:官网 高性能带有数据结构的Key-Value内存数据库 Remote Dictionary Server(远程字典服务器)是完全开源的,使用ANSIC语言编写遵守BSD协议,例如String、Hash、List、Set、SortedSet等等。数据…

深度学习 Pytorch 深层神经网络

在之前已经学习了三种单层神经网络,分别为实现线性方程的回归网络,实现二分类的逻辑回归(二分类网络),以及实现多分类的softmax回归(多分类网络)。从本节开始,我们将从单层神经网络展…

【React】PureComponent 和 Component 的区别

前言 在 React 中,PureComponent 和 Component 都是用于创建组件的基类,但它们有一个主要的区别:PureComponent 会给类组件默认加一个shouldComponentUpdate周期函数。在此周期函数中,它对props 和 state (新老的属性/状态)会做一…