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

news2024/9/20 18:51:23


 

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

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

        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.coloradmin.cn/o/2087192.html

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

相关文章

芒格-“用幸存者心态去对待问题,永远不要有受害者心态”

我不会因为人性而感到意外,也不会花太多时间感受背叛, 我总是低下头去调整自己,去适应这一类事情, 所以我不允许自己花太多时间,去感受背叛, 但凡有一丁点这种想法,从我脑海闪过,我就…

Ubuntu 18.04升级gclibc为2.28版本

一、查看系统支持的 GLIBC 版本号 ​strings /lib/x86_64-linux-gnu/libc.so.6 | grep GLIBC_出现以下,说明到2.27版本,没有2.28版本,所以我们需要手动安装 GLIBC_2.2.5 GLIBC_2.2.6 GLIBC_2.3 GLIBC_2.3.2 GLIBC_2.3.3 GLIBC_2.3.4 GLIBC_…

Linux环境下的MySQL的卸载、安装与使用[以CentOS7为例说明]

Linux环境下的MySQL的卸载、安装与使用[以CentOS7为例说明] 1、下载MySQL安装包2、卸载MySQL(1)检查是否安装过MySQL和mariadb(2)卸载MySQL和mariadb(3)问题记录(了解) 3、安装MySQL…

MacOS通过Docker部署MySQL数据库,以及Docker Desktop进行管理

目录 一.不需要持久化存储 1.启动容器 2.查看容器和镜像 3.容器管理 二.持久化存储启动mysql容器 1.创建docker卷 2.运行容器,指定卷 3.在mysql里面随便建个库,建张表,弄点数据 4.停止并删除MySQL容器 5.重新运行容器,并且挂载相同的卷,也就是上面第二步的命令 6.连…

【412】【统计近似相等数对 II】

差130个样例,等佬解 class Solution:def ifqual(self,str1,str2):return int(str1)int(str2)def change(self,str1,str2):str1 list(str1)nlen(str1)t0for i in range(n):for j in range(i1,n):str1[i],str1[j]str1[j],str1[i]t1if self.ifqual("".join…

k8s-使用Network Policies实现网络隔离

一、需求 Kubernetes 的命名空间主要用于组织和隔离资源,但默认情况下,不同命名空间中的 Pod 之间是可以相互通信的。为了实现更严格的网络隔离,同一套k8s需要根据不同的命名空间进行网络环境隔离,例如开发(dev01&…

Plik文件上传系统本地docker部署与远程访问传输文件详细操作流程

文章目录 前言1. Docker部署Plik2. 本地访问Plik3. Linux安装Cpolar4. 配置Plik公网地址5. 远程访问Plik6. 固定Plik公网地址7. 固定地址访问Plik 前言 本文介绍如何使用Linux docker方式快速安装Plik并且结合Cpolar内网穿透工具实现远程访问,实现随时随地在任意设…

blender4.2中安装插件的方式

1,安装好blender之后,打开软件,找到 编辑,---> 偏好设置, 插件---> 从磁盘安装...., 找到插件.zip格式的文件, 选择 .zip格式的文件后,点击“从磁盘安装”按钮,即可

【linux003】目录操作命令篇 - cd 命令

文章目录 1、基本用法2、常见选项3、举例4、注意事项 cd 命令在 Linux 中用于更改当前工作目录。它是“change directory”的缩写。 cd 命令本身比较简单,不具有复杂的选项和参数,但它提供了一些有用的功能。 1、基本用法 cd [目录]2、常见选项 ~&…

示波器常识概述及简介

1、示波器分类 DSO:数字存储示波器; MSO:混合信号示波器,将传统的 DSO 测量模拟与逻辑分析测量相结合。 2、示波器探头提供高阻抗输入的原因 示波器探头在测试点提供相对较高的输入阻抗端子功能(高电阻,低…

Html 添加音效音乐音频播放和震动效果

文章目录 需求分析1.我们需要将用到的音频文件导入到我们的网页中2.赋给图片点击的方法3.编写play()方法4. wav 格式转 MP35. 添加震动效果需求 给页面添加背景音乐和震动效果 分析 点击指定点播放音乐,再次点击则停止音乐. 1.我们需要将用到的音频文件导入到我们的网页…

数据库:头歌实验一关系数据库标准语言SQL

一、创建数据库 本关任务: 建立数据库 任务要求: 建立demo数据库 并显示所有数据库 #代码开始 CREATE DATABASE demo; show databases;#代码结束 二、创建表 本关任务: 建立数据表 任务要求 设有一个demo数据库,包括S,P,…

Android 动态性能框架 (ADPF)

Performance Hint API | Android game development | Android Developers (google.cn) ADPF 是一组 API,可让游戏和性能密集型应用更为直接地与 Android 设备的电源和散热系统进行互动。借助这些 API,您可以监控 Android 系统上的动态行为&#xff…

给Ubuntu添加硬盘之后,该如何使用

当你给Ubuntu系统添加了新的硬盘后,你需要按照以下步骤来识别、分区、格式化和挂载新硬盘: 1. 检查新硬盘是否被系统识别 首先确认新硬盘已经被系统识别: lsblk 2. 分区新硬盘 如果硬盘没有分区或者需要重新分区,可以使用fdis…

Open3D mesh 获取网格属性

目录 一、概述 二、网格属性 三、实现代码 四、实现效果 4.1原始mesh 4.2数据显示 Open3D点云算法汇总及实战案例汇总的目录地址: Open3D点云算法与点云深度学习案例汇总(长期更新)-CSDN博客 一、概述 在 Open3D 中,网格模…

kubectl陈述式资源管理方式、声明式资源管理

一、命令行: kubectl命令行工具 优点: 90%以上的场景都可以满足 对资源的增,删,查比较方便,对改不是很友好 缺点:命令比较冗长,复杂难记 声明方式:k8s当中的yaml文件实现资源管理----声明式 GUI:图形化工具的管理…

谷歌又出三款Gemini模型

每周跟踪AI热点新闻动向和震撼发展 想要探索生成式人工智能的前沿进展吗?订阅我们的简报,深入解析最新的技术突破、实际应用案例和未来的趋势。与全球数同行一同,从行业内部的深度分析和实用指南中受益。不要错过这个机会,成为AI领…

uniapp、微信小程序车牌的录入的解决方案

结合uv-ui进行编写&#xff0c;键盘使用uv-ui的组件&#xff0c;其他由我们自己编写。 <template><div class"addCarContent"><div class"boxContent"><div class"carCodeInput" click"getIndex"><div:cl…

中间件实时监控,运维难题一站解决

中间件是介于操作系统和在其上运行的应用程序之间的软件&#xff0c;实现了分布式应用程序的通信和数据管理&#xff0c;用于协调不同的系统和组件之间的通信&#xff0c;是连接应用与底层资源之间的桥梁。因此&#xff0c;中间件的稳定与高可用对于整个业务系统的可靠性和性能…

算法题:单词接龙

单词接龙 字典 wordList 中从单词 beginWord 到 endWord 的 转换序列 是一个按下述规格形成的序列 beginWord -> s1 -> s2 -> … -> sk&#xff1a; 每一对相邻的单词只差一个字母。 对于 1 < i < k 时&#xff0c;每个 si 都在 wordList 中。注意&#xf…