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

这里就不放效果了,大概意思就是在使用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.hqwc.cn/news/475040.html

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

相关文章

UE5中的DataTable说明

创建DataTable 在编辑器中创建 在文件夹空白处右击&#xff0c;选择Miscellaneous/DataTable&#xff0c;如图&#xff1a; 使用代码创建 // 创建DataTable实例 UDataTable* MyDataTable NewObject(); // 创建一个行结构体 UStruct* RowStruct UStruct::CreateEmpty(); // 添…

SPSSAU【文本分析】|社会关系网络图

社会网络关系图 社会网络关系图展示关键词之间的关系情况&#xff0c;此处的关系是指‘共词矩阵’&#xff0c;即两个关键词同时出现的频数情况&#xff0c;将‘共词矩阵’信息使用可视化方式进行呈现出来&#xff0c;接下来将分别阐述‘共词矩阵’和‘社会网络关系图’。 共词…

Java并发基础:ConcurrentSkipListMap全面解析

内容概要 ConcurrentSkipListMap类它融合了跳表的高效查找与并发控制的稳定性&#xff0c;在多线程环境下&#xff0c;该类提供了出色的线程安全性能&#xff0c;确保数据的一致性与完整性&#xff0c;其操作具有对数级别的时间复杂度&#xff0c;即使在大数据集下也能维持高效…

【简洁的代码永远不会掩盖设计者的意图】如何写出规范整洁的代码

个人名片&#xff1a; &#x1f981;作者简介&#xff1a;学生 &#x1f42f;个人主页&#xff1a;妄北y &#x1f427;个人QQ&#xff1a;2061314755 &#x1f43b;个人邮箱&#xff1a;2061314755qq.com &#x1f989;个人WeChat&#xff1a;Vir2021GKBS &#x1f43c;本文由…

Unity 减低GC和优化

文章目录 在Unity中&#xff0c;垃圾收集&#xff08;Garbage Collection, GC&#xff09;是一项重要的内存管理机制&#xff0c;但过度的GC活动可能会导致性能瓶颈。优化Unity项目中的GC涉及减少不必要的对象分配和生命周期管理。以下列举了五个实例来详细说明如何降低GC负担并…

Typora+PicGO+腾讯云COS做图床

文章目录 Typora&#xff0b;PicGO&#xff0b;腾讯云COS做图床一、为什么使用图床二、Typora、PicGO和腾讯云COS介绍三、下载Typora和PicGOTyporaPicGO 四、配置Typora、PicGO和腾讯云COS腾讯云COS配置PicGO配置Typora配置 Typora&#xff0b;PicGO&#xff0b;腾讯云COS做图床…

伦敦金和现货黄金是一回事吗?

想进入黄金市场的朋友&#xff0c;在网上一搜相关的讯息&#xff0c;可能就懵了。这个市场中好像有几个品种&#xff0c;又是伦敦金又是现货黄金什么的。很多新手投资者想知道&#xff0c;这些伦敦金、现货黄金分别是指什么&#xff0c;下面我们就来讨论一下。 实际上&#xff…

微信小程序独立分包与分包预下载

官网链接 独立分包配置方法 独立分包使用限制 独立分包中不能依赖主包和其他分包中的内容&#xff0c;包括 js 文件、模板、wxss、自定义组件等&#xff1b;App 只能在主包内定义&#xff0c;独立分包中不能定义 App&#xff0c;会造成无法预期的行为独立分包中暂时不支持使用…

java面试微服务篇

目录 目录 SpringCloud Spring Cloud 的5大组件 服务注册 Eureka Nacos Eureka和Nacos的对比 负载均衡 负载均衡流程 Ribbon负载均衡策略 自定义负载均衡策略 熔断、降级 服务雪崩 服务降级 服务熔断 服务监控 为什么需要监控 服务监控的组件 skywalking 业务…

KNN算法总结

概述 邻近算法&#xff0c;或者说K最邻近&#xff08;KNN&#xff0c;K-NearestNeighbor&#xff09;分类算法是数据挖掘分类技术中最简单的方法之一。所谓K最近邻&#xff0c;就是K个最近的邻居的意思&#xff0c;说的是每个样本都可以用它最接近的K个邻近值来代表。近邻算法…

移动机器人的控制逻辑全解析。

你是否曾对那些在工厂中穿梭自如的移动机器人感到好奇&#xff1f;它们是如何准确无误地执行任务的&#xff1f;这一切都归功于移动机器人的控制逻辑&#xff01;今天&#xff0c;就让我们深入探讨一下移动机器人控制逻辑的重点。 一、环境感知与建模技术是移动机器人实现自主导…

【鸿蒙系统学习笔记】开发工具安装

一、准备开发环境 1.1、安装IDE 鸿蒙应用开发需要使用配套的IDE——HUAWEI DevEco Studio。 DevEco Studio基于IntelliJ IDEA Community&#xff08;IDEA社区版&#xff09;构建&#xff0c;为鸿蒙应用提供了一站式开发环境&#xff0c;集成了开发、运行、调试以及发布应用的…