uni-app使用uView打开弹出层后输入框聚焦时placeholder错位问题

news2025/1/24 14:05:33

这里就不放效果了,大概意思就是在使用uView的popus时,在底部弹出后,如果弹窗中的输入框会造成一瞬间的placeholder文字错位,这个问题的主要是因为uView安全区适配导致

uView相关文档

https://www.uviewui.com/components/safeAreaInset.html


popus源码
在这里插入图片描述
在这里插入图片描述



它会自动判断在并且在IPhone X等机型的时候,给元素加上一个适当底部内边距,从而为了防止用户点击相关按钮时候误触。就像这样:
在这里插入图片描述
可以在真机测试的时候通过真机控制台删除安全距离生成元素,就会发现已经没有了之前的placeholder错位问题



解决方案:
popup组件中动态绑定safeAreaInsetBottom的值,在每次键盘高度变化的时候取反,并且在每次键盘失去焦点的时候恢复底部安全距离,从而实现页面上推,键盘弹出时候,因为安全距离而导致的placeholder错位问题

<u-popup :show="show" @open="popupOpen" :safeAreaInsetBottom="safeArea">
data() {
	return {
		safeArea: true
	}
},
// 键盘高度变化事件(解决iphoneX底部安全距离导致的placeholder错位问题)
keyboardheightchange() {
	this.safeArea = !this.safeArea
},
// 输入框失焦
inputBlur() {
	this.safeArea = true
},

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

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

相关文章

视频如何去除水印?这三个方法赶紧收藏

在数字化内容的海洋中&#xff0c;视频已成为我们日常生活中不可或缺的一部分。然而&#xff0c;很多时候&#xff0c;我们渴望观看的优质视频内容却被水印所困扰。因此我们就需要视频去水印工具来帮助我们解决这些困扰。 一、水印云 水印云的视频去水印功能采用了先进的 AI …

自己部署一个牛逼的开发备忘录系统

目录 效果 简介 安装 使用 效果 简介 为开发人员分享快速参考备忘清单【速查表】。这是英文版 Reference 的中文版本&#xff0c;目的是为了方便自己的技术栈查阅&#xff0c;如果您提供一个清单&#xff0c;我将抽空搬运&#xff0c;立即撸起来 :)。如果您发现此处的备忘单…

数字化转型导师坚鹏:BLM政府数字化转型战略

BLM政府数字化转型战略 ——以BLM模型为核心&#xff0c;实现知行果合一 课程背景&#xff1a; 很多政府存在以下问题&#xff1a; 不知道如何系统地制定政府数字化转型战略&#xff1f; 不清楚其它政府数字化转型战略是如何制定的&#xff1f; 不知道其它政府数字化转…

分享一下,程序员为什么不喜欢关电脑?(个人观点仅供娱乐哈哈哈)

你是否曾经疑惑&#xff0c;为何身边的程序员朋友总是让电脑保持开机状态&#xff0c;仿佛与它们有着不解之缘&#xff1f;别急着给他们贴上“电脑迷”的标签&#xff0c;背后其实隐藏着许多合理的原因。今天&#xff0c;就让我们一同走进程序员的世界&#xff0c;探究他们为何…

Windows Server系列的时钟同步

文章目录 前言一、设置时钟同步二、调整同步周期总结前言 在Windows Server系列操作系统上部署网站应用有时候需要考虑服务器之间的时钟同步问题。当存在不同服务器之间的通讯访问并且要求一定的安全限定时,时钟同步的需求尤其显得比较迫切。本文将以Windows2012server为例,…

WorkPlus构建安全高效的内网通信平台,助力企业内部协作

为何选择WorkPlus作为内网通信软件的首选&#xff1f;首先&#xff0c;WorkPlus提供全面的内网通信解决方案。不论是文字聊天、语音通话还是实时视频会议&#xff0c;WorkPlus都能提供稳定、高效的通信体验&#xff0c;确保团队成员能够及时分享信息、快速沟通和协作。通过Work…

Redis篇----第五篇

系列文章目录 文章目录 系列文章目录前言一、redis的过期策略以及内存淘汰机制二、Redis 常见性能问题和解决方案?三、为什么Redis的操作是原子性的,怎么保证原子性的?四、Redis事务前言 前些天发现了一个巨牛的人工智能学习网站,通俗易懂,风趣幽默,忍不住分享一下给大家…

4核8G云服务器够用吗?支持多少人?

4核8G服务器支持多少人同时在线访问&#xff1f;阿腾云的4核8G服务器可以支持20个访客同时访问&#xff0c;关于4核8G服务器承载量并发数qps计算测评&#xff0c;云服务器上运行程序效率不同支持人数在线人数不同&#xff0c;公网带宽也是影响4核8G服务器并发数的一大因素&…

Google Gemini 1.5:引领跨模态AIGC信息分析理解与视频内容推理的新篇章,与 Open AI 决一高下!

Gemini 1.5具有100万token的上下文理解能力&#xff0c;是目前最强&#xff01;具有跨模态理解和推理&#xff1a;能够对文本、代码、图像、音频和视频进行高度复杂的理解和推理。允许分析1小时视频、11小时音频、超过30,000行代码或超过700,000字的文本。不过谷歌这个Gemini 1…

java后端将非树型结构的机构数据转换为树形结构的机构数据示例

文章目录 前言一、非树型机构信息1.示例数据2.机构编码规则二、转换为树型机构1.转换逻辑2.具体实现2.1.将excel文件读取到程序中2.2.解析机构编码并获取所有的父级编码候选值2.3.设置所有节点的ParentCode2.4.查找机构的根节点2.5.通过ParentCode构建完整的树型结构2.6.将树形…

【算法】基础算法002之滑动窗口(一)

&#x1f440;樊梓慕&#xff1a;个人主页 &#x1f3a5;个人专栏&#xff1a;《C语言》《数据结构》《蓝桥杯试题》《LeetCode刷题笔记》《实训项目》《C》《Linux》《算法》 &#x1f31d;每一个不曾起舞的日子&#xff0c;都是对生命的辜负 目录 前言 1.长度最小的子数组…

微服务学习 | Springboot整合Dubbo+Nacos实现RPC调用

&#x1f3f7;️个人主页&#xff1a;鼠鼠我捏&#xff0c;要死了捏的主页 &#x1f3f7;️系列专栏&#xff1a;Golang全栈-专栏 &#x1f3f7;️个人学习笔记&#xff0c;若有缺误&#xff0c;欢迎评论区指正 前些天发现了一个巨牛的人工智能学习网站&#xff0c;通俗易懂&…

vue打包优化,webpack的8大配置方案

vue-cli 生成的项目通常集成Webpack &#xff0c;在打包的时候&#xff0c;需要webpack来做一些事情。这里我们希望它可以压缩代码体积&#xff0c;提高运行效率。 文章目录 &#xff08;1&#xff09;代码压缩&#xff1a;&#xff08;2&#xff09;图片压缩&#xff1a;&…

Doris ——SQL原理解析

目录 前言 一、Doris简介 二、SQL解析简介 2.1 词法分析 2.2 语法分析 2.3 逻辑计划 2.4 物理计划 三、Doris SQL解析的总体架构 四、Parse阶段 五、Analyze阶段 六、SinglePlan阶段&#xff08;生成单机逻辑Plan阶段&#xff09; 七、DistributedPlan计划&#xf…

如何将阿里云服务器迁移

&#x1f4d1;前言 本文主要是如何将阿里云服务器迁移实现数据转移的文章&#xff0c;如果有什么需要改进的地方还请大佬指出⛺️** &#x1f3ac;作者简介&#xff1a;大家好&#xff0c;我是青衿&#x1f947; ☁️博客首页&#xff1a;CSDN主页放风讲故事 &#x1f304;每日…

MySQL篇之SQL优化

一、表的设计优化 表的设计优化&#xff08;参考阿里开发手册《嵩山版》&#xff09;&#xff1a; 1. 比如设置合适的数值&#xff08;tinyint int bigint&#xff09;&#xff0c;要根据实际情况选择。 2. 比如设置合适的字符串类型&#xff08;char和varchar&#xff09…

Redis背后的神奇力量:为何它如此高效?

Redis的速度快主要有以下几个原因&#xff1a; 1、基于内存操作 Redis的操作都是基于内存的&#xff0c;数据存储在内存中&#xff0c;而内存的读写速度远远快于硬盘&#xff0c;内存的运行速度比硬盘高出几个数量级&#xff0c;就像从翻阅书籍变成即刻在线信息查询&#xff0…

云计算实训室建设方案2024

云计算课程体系 云计算实训课程体系设计依据 一、培养目标 唯众公司提供创新技术教育和服务的目标&#xff0c;旨在提高人才培养质量&#xff0c;扩大就业创业&#xff0c;推动经济转型升级&#xff0c;以及培育新的经济发展动能。唯众公司提供云计算、大数据、人工智能等创…

网络原理(HTTP篇)

网络原理HTTP 前言HTTPHTTP的工作流程抓包工具抓取HTTP报文HTTP报文格式 请求报文具体细节首行URLURL的基本格式URL encode 方法 报头(header)HostContent-Length 和 Content-TypeUser-Agent&#xff08;UA&#xff09;RefererCookie&#xff08;重要&#xff09; 前言 如图&a…

汽车金融市场研究:预计2029年将达到482亿美元

汽车金融公司作为汽车流通产业链的重要一环&#xff0c;认真贯彻落实国家有关政策&#xff0c;采取多种措施助力汽车产业发展&#xff0c;为促进推动汽车消费、助力畅通汽车产业链、支持稳定宏观经济大盘发挥了积极作用。 益于国内疫情得到有效控制&#xff0c;我国经济持续稳定…