uniapp uni-popup底部弹框留白 底部颜色修改 滚动穿刺


 

        做底部弹框的时候,可能出现以下场景需要处理。

        一、出现底部留白不是白色,需要修改颜色的时候:

        1、如果弹框不需要圆角效果,则在uni-popup加上背景色就行,弹框是个直角样式:

        2、如果需要圆角效果,千万不能加backgroundColor这个属性,在style里面设置view的圆角效果:

        

        其中style样式:

效果:

        底部会有安全距离:

        如果直接设置padding-bottom:20rpx,会出现如下:

                这时候需要设置uni-popup的safeArea属性为false:

        

效果:

        需要在style设置底部间距:

        三、弹框滚动时背景跟着滚动,解决方法监听change事件,设置overflow属性:

        xml:

        头部添加page-meta属性

        弹框添加change方法    

    js里面method:

这样就不会滚动穿刺了。

        最终代码:

        其中type是指底部弹出,change方法解决弹框滚动时背景跟着滚动,safeArea是指弹框底部是否有安全距离。

        其中设置背景白色,上圆角,然后就是距离底部要动态根据底部安全距离做留白,有的没有这个安全距离就给了20rpx。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/web/51593.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

CSS3页面布局-三栏-中栏流动布局

三栏-中栏流动布局 用负外边距实现 实现三栏布局且中栏内容区不固定的核心问题就是处理右栏的定位&#xff0c; 并在中栏内容区大小改变时控制右栏与布局的关系。 控制两个外包装容器的外边距&#xff0c;一个包围三栏&#xff0c;一个包围左栏和中栏。 <!DOCTYPE html&…

【vue、Electron】搭建一个Electron vue项目过程、将前端页面打包成exe 桌面应用

文章目录 前言使用 electron-vue 创建项目1. 安装 vue-cli&#xff08;如果未安装&#xff09;2. 使用 electron-vue 模板创建项目3. 安装和配置 electron-builder4. 运行Electron项目5. 打包应用 可能遇到的问题解决Electron vue首次启动巨慢无法加载执行npm run electron:bui…

grid布局实现移动端H5响应式排列正方形格子布局

grid布局实现移动端H5响应式排列正方形区域 grid布局&#xff1a;CSS Grid 网格布局教程在 CSS 中&#xff0c;padding-top 的百分比值是相对于元素自身的宽度&#xff0c;而不是高度。这是 CSS 规范中的一个特性&#xff0c;所有的 padding 和 margin 的百分比值都是相对于元…

客服系统简易版

整体架构解读 客服端和商城端都通过websocket连接到客服系统, 并定期维持心跳当客户接入客服系统时, 先根据策略选择在线客服, 然后再发送消息给客服 websocket实现 用netty实现websocket协议, 增加心跳处理的handler, 详见chat-server模块 客服路由规则 暂时仅支持轮询的…

python 和C通过共享内存通信

C 接收数据 #include <stdio.h> #include <stdlib.h> #include <sys/shm.h> #include <string.h> #include <time.h> #include <sys/time.h>#define SHAERD_MEM_SIZE 20 * 1024 * 1024 // 20MBytes #define ImgWidth 1024 #define ImgHeig…

上新!Matlab实现基于QRGRU-Attention分位数回归门控循环单元注意力机制的时间序列区间预测模型

目录 效果一览基本介绍程序设计参考资料 效果一览 基本介绍 1.Matlab实现基于QRGRU-Attention分位数回归门控循环单元注意力机制的时间序列区间预测模型&#xff1b; 2.多图输出、多指标输出(MAE、RMSE、MSE、R2)&#xff0c;多输入单输出&#xff0c;含不同置信区间图、概率…

出现Property ‘sqlSessionFactory‘ or ‘sqlSessionTemplate‘ are requiredProperty报错

目录&#xff1a; bug Property ‘sqlSessionFactory‘ or ‘sqlSessionTemplate‘ are requiredProperty报错解决方法 bug Property ‘sqlSessionFactory‘ or ‘sqlSessionTemplate‘ are requiredProperty 报错 在一个springboot demo启动的时候出现以下错误 &#xff0c;…

中国城市经济韧性数据集(2007-2022年)

数据来源&#xff1a;数据来自历年《中国城市统计NJ》、各省市《统计NJ》及《中国区域经济统计NJ》 时间范围&#xff1a;2007-2022年 数据范围&#xff1a;中国地级市样例数据&#xff1a; 包含内容&#xff1a; 全部内容下载链接&#xff08;原始数据计算代码最终数据&…

大数据基础:离线与实时数仓区别和建设思路

文章目录 离线与实时数仓区别和建设思路 一、离线数仓与实时数仓区别 ​​​​​​​二、实时数仓建设思路 离线与实时数仓区别和建设思路 ​​​​​​​一、离线数仓与实时数仓区别 离线数据与实时数仓区别如下&#xff1a; 对比方面 离线数仓 实时数仓 架构选择 传…

zdppy+vue3+onlyoffice文档管理系统实战 20240829上课笔记 Python验证码框架完成

遗留的问题 还没有测试校验的功能 测试校验验证码的功能 生成验证码 from .tobase64 import get_base64 from .validate import is_captchadef captcha(api, cache, num4, expire60):""":param cache: 缓存对象:param num: 验证码的个数:param expire: 验证…

【软考】网络安全控制技术

目录 1. 说明2. 防火墙技术3. 加密技术4. 用户识别技术5. 访问控制技术6. 网络反病毒技术7. 网络安全漏洞扫描技术8.入侵检测技术9.例题 1. 说明 1.为了保护网络信息的安全可靠&#xff0c;除了运用法律和管理手段外&#xff0c;还需依靠技术方法来实现。2.网络安全控制技术目…

C++系列-STL容器之vector

STL概念 vector基本概念vector与数组的区别vector容器的特点动态大小连续存储自动扩容尾部操作高效 vector动态扩展的含义vector常用的接口示意 vector的构造函数vector赋值操作重载赋值assign赋值 vector的容量和大小vector的插入和删除vector数据存取vector互换容器vector互换…

Apache RocketMQ 批处理模型演进之路

作者&#xff1a;谷乂 RocketMQ 的目标&#xff0c;是致力于打造一个消息、事件、流一体的超融合处理平台。这意味着它需要满足各个场景下各式各样的要求&#xff0c;而批量处理则是流计算领域对于极致吞吐量要求的经典解法&#xff0c;这当然也意味着 RocketMQ 也有一套属于自…

从开题到答辩:ChatGPT超全提示词分享!(上)【建议收藏】

在浩瀚的知识领域中&#xff0c;提问的艺术是探索真理的钥匙。在这个信息爆炸的时代&#xff0c;深入探索知识的海洋&#xff0c;不仅需要热情和毅力&#xff0c;更需要正确的方法和工具。学术研究是一个复杂而严谨的过程&#xff0c;涉及从选题、文献综述到研究设计、数据收集…

Spring Boot常用注解及其含义

Spring Boot常用注解及其含义 注解含义SpringBootApplication标记主应用程序类&#xff0c;包含Configuration、EnableAutoConfiguration和ComponentScan。EnableAutoConfiguration启用Spring Boot的自动配置功能&#xff0c;根据类路径中的依赖自动配置应用程序。Configurati…

最新高仿拼夕夕源码/拼单系统源码/拼单商城/类目功能齐全

源码简介&#xff1a; 高仿拼夕夕源码&#xff0c;拼单商城系统源码、拼团商城源码&#xff0c;改的版本。拼夕夕拼团商城系统源码源码 多商户多区域拼团系统源码。 自己改的版本&#xff0c;类似于拼单的商城&#xff0c;功能齐全&#xff0c;看着还挺不错&#xff0c;绝对值…

能源与节能

期刊名称&#xff1a; 能源与节能 国内统一刊号(CN)&#xff1a; CN 14-1360/TD 国际标准刊号(ISSN)&#xff1a;ISSN 2095-0802 栏目设置&#xff1a;本刊特稿能源产业节能减排技术研究实践运用 征稿简则 本刊围绕科技发展规划和科技政策&#xff0c;刊登煤炭、石油、天然气…

macos 10.15 catalina xcode 下载和安装

在macos 10.15 catalina系统中, 由于系统已经不再支持,所以我们无法通过应用商店来安装xcode, 需要手动下载指定版本的 xcode 版本才能安装, catalina 支持的最新xcode版本为 Xcode v12.4 (12D4e) , 其他的新版本是无法安装在Catalina系统中的. Xcode_12.4.xip下载地址 注意,下…

git-命名规范

目录 压轴&#xff1a;压箱底的东西 博客几乎没人说这个&#xff0c;属于不可外传的东西。过段时间&#xff0c;我也会进行访问限制&#xff0c;毕竟&#xff0c;掌握人越少竞争压力越小&#xff0c;我也怕&#xff0c;请删谨慎保存。 分支命名策略&#xff1a; Git分支命名的…

RocketMQ第5集

一 RocketMQ的工作流程 1.1 生产环节producer Producer可以将消息写入到某Broker中的某Queue中&#xff1a;其中Producer发送消息之前&#xff0c;会先向NameServer发出获取消息Topic的路由信息的请求&#xff0c;NameServer返回该Topic的路由表及Broker列表。简单的说&…