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.rhkb.cn/news/413823.html

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

相关文章

vue3本地运行错误集

1、解决报错ValidationError: Progress Plugin Invalid Options问题 ValidationError: Progress Plugin Invalid Optionsoptions should NOT have additional propertiesoptions should NOT have additional propertiesoptions should NOT have additional propertiesoptions …

「Claude3.5」全面超越「gpt-4o」,我用它做了个贪吃蛇,玩了一整天!

大家好,我是凡人。 就在昨天晚上Anthropic在X上连续发了4条动态来高调宣布他们的Claude 3.5 Sonnet中杯的版本已经全面向公众开放使用,大批的技术博主连夜测试,纷纷给出的不低的评价。 而这还仅仅是开胃小菜,官方宣称今年晚些时候…

苹果mac数据恢复概率大吗 mac数据恢复专业软件哪个好用

一般情况下,当我们把电脑中的数据删掉后,都会保存在回收站里面,但如果回收站被清空了或者数据在回收站中没有找到的话,那么,之前被删掉的数据还能恢复吗?恢复的概率有多大呢? 答案是可以的&…

【微服务】限流、熔断和降级(持续更新中~)

1、限流 1.1 什么是限流 限流(Rate Limiting)是一种常用的技术手段,用于控制系统对资源的访问速率,确保系统的稳定性和可靠性。在分布式系统、Web服务、API接口等场景中,限流尤为重要。通过限制请求的频率或数量&…

每天五分钟计算机视觉:人脸识别网络FaceNet

本文重点 在前面的课程中,为了解决人脸识别的问题,我们学习了Siamese神经网络。本文我们学习另外一种人脸识别网络模型FaceNet。 论文 FaceNet: A Unified Embedding for Face Recognition and Clustering FaceNet概述 FaceNet是谷歌在CVPR 2015上提出的一种深度学习模型,…

【Redis】Redis 持久化 AOF、RDB—(七)

目录 一、AOF 日志二、RDB 内存快照 Redis 一旦服务器宕机,内存中的数据将全部丢失,从后端数据库恢复这些数据,对数据库压力很大,且性能肯定比不上从 Redis 中读取,会拖慢应用程序。所以,对 Redis 来说&…

Linux awk案例

目录 1. 查询时间超过2000毫秒的请求2. 查询指定列组合出现的次数3. 统计所有文件的大小4. 获取大于指定大小的文件名,并按照从大到小排序5. grep指定字段后,使用awk列转行6. 查询第四个字段等于指定值的内容 1. 查询时间超过2000毫秒的请求 ✅log: 202…

初等数学几百年重大错误:N各元n的对应n+1的全体是N的真子集N+——百年病态集论的症结

黄小宁 数学图可是“离散”的点组成的点集N{0,1,2,…,n,…0}(各数是点的坐标)。设本文所说集合往往是元不少于两个的集。定义:若数(点&#xff09…

实现一个能设置MaxLine的LayoutManager

实现一个能设置MaxLine的LayoutManager 有时候,我们会遇到这种需求:一个线性的列表布局,当item量很少的时候,就是wrap_content直接展示完所有item,但是当item数量超过某个数时就要固定高度,让其变成可滑动…

jmeter如何把一个请求的响应中部分字段提取出来便于下个请求用

jmeter如何把一个请求的响应中部分字段提取出来便于下个请求用,可以通过json提取器提取,如果提取多个,就设置多个json提取。 ![在这里插入图片描述](https://i-blog.csdnimg.cn/direct/dd5afb1fca3f4e31b636e17e11e8dfc3.png

15年让爱轮回

15年前,运巧的命运齿轮因一位记者的稿件悄然转动,运巧这个名字,真的是命运的巧合,把她和邦尔骨科连接在了一起,她的人生轨迹因一家医院的善举发生了改变。那时的她,面临生活的重重困境,求学之路…

python实战实例:矩阵加法乘法转置

1.矩阵加法—题目描述 输入两个 n行 m 列的矩阵 A 和 B,输出它们的和 AB,矩阵加法的规则是两个矩阵中对应位置的值进行加和,具体参照样例。 输入格式 第一行包含两个整数 n 和 m,表示矩阵的行数和列数。 接下来 n 行&#xff…

Git安装及配置

Git安装 在你开始使用 Git 前,需要将它安装在你的计算机上。 即便已经安装,最好将它升级到最新的版本。 你可以通过软件包或者其它安装程序来安装,或者下载源码编译安装。 下面,我们将会介绍不同操作系统上 Git 的安装方法。 在 Windows 上安装 在 Windows 上安装 Git 的…

STM32的寄存器详解

目录 前言 一、 STM32 单片机寄存器概述 1.寄存器的作用 2.寄存器的分类 二、STM32 内核寄存器 1.程序计数器(PC) 2.堆栈指针(SP) 3.链接寄存器(LR) 4.控制寄存器(CONTROL)…

智能分拣投递机器人

产品介绍 自研智能分拣投递机器人,专注于物流行业“NC小件”的分拣与投递,机器人运行稳定、分拣效率高,搭配智能分拣投递系统单台机器人最大作业效率可达400件/H,投递效率相较于传统“小黄人“提升了30%-50%,可替代“…

【3.8】贪心算法-解无重叠区间

一、题目 给定一个区间的集合 intervals ,其中 intervals[i] [starti, endi] 。返回 需要移除区间的最小数量,使剩余区间互不重叠 。 示例 1: 输入: intervals [[1,2],[2,3],[3,4],[1,3]] 输出: 1 解释: 移除 [1,3] 后,剩下的区间没有重叠…

EtherCAT 转 ModbusTCP 网关

设备简介 本产品是 EtherCAT 和 Modbus TCP 网关,使用数据映射方式工作。 本产品在 EtherCAT 侧作为 EtherCAT 从站,接 TwinCAT 、 CodeSYS 、 PLC等;在 ModbusTCP 侧做为 ModbusTCP 主站( Client )或从站…

奉加微PHY6233开门狗;超时时间对不上;好像应用不需要喂狗只需要开启定时器就行;底层是通过空闲任务喂狗的

超时时间对不上 这里设置看门狗超时时间为WDG_16S: hal_watchdog_config(WDG_16S);但是我测试到复位时间却是34秒: 然后我设置时间为WDG_2S的话实际间隔是6秒: 我很无语,被逼无奈只能够认了,最小设置是WDG_2S也就是说时间为6秒,这时候2秒喂狗一次: #define

计算机视觉基础. 1 学习导论

1 .引言 学习的目的是从过去的经验中吸取教训,以解决未来的问题。通常,这涉及搜索解决问题过去实例的算法。然后,该算法可以应用于该问题的未来实例。 过去和未来不一定指日历日期;相反,它们指的是学习者之前看到的内…

使用python导出Excel表格中的lua配置

背景:游戏开发中, 策划使用Excel配置游戏中的参数数据,写一个工具用于导出这些配置 工具选择使用 python来开发,这样Windows、macOS、Linux平台都可以使用,而且有丰富的第三方模块。 本机先安装python,我…