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.mzph.cn/news/688002.shtml

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

相关文章

Vue3

目录 一、 Vue3简介 1. 性能的提升 2. 源码的升级 3. 拥抱TypeScript 4. 新的特性 二、 创建Vue3工程 1. 基于 vue-cli 创建 2. 基于 vite 创建(推荐) 3. 一个简单的效果 三、Vue3核心语法 1. OptionsAPI 与 CompositionAPI &#xff08;1&#xff09;Options API …

UE蓝图 Set节点和源码

文章目录 Set节点说明相关源码 Set节点说明 UE蓝图中的Set节点是用于对变量进行赋值操作的重要组件。它具有多种功能和作用&#xff0c;具体如下&#xff1a; 变量赋值&#xff1a;Set节点可以用于设置不同类型的变量值&#xff0c;包括整数、浮点数、布尔值、字符串等。在游戏…

OpenAI超级视频模型Sora技术报告解读,虚拟世界涌现了

昨天白天&#xff0c;「现实不存在了」开始全网刷屏。 「我们这么快就步入下一个时代了&#xff1f;Sora简直太炸裂了」。 「这就是电影制作的未来」&#xff01; 谷歌的Gemini Pro 1.5还没出几个小时的风头&#xff0c;天一亮&#xff0c;全世界的聚光灯就集中在了OpenAI的So…

node命令yarn --version指向了java

问题描述 本地安装了java、hadoop和nodejs&#xff0c;并配置了环境变量&#xff0c;但是hadoop的bin目录下存在yarn命令&#xff0c;所以使用nodejs的yarn命令启动项目会出现找不到类&#xff0c;此时键入yarn -version也会显示java的版本。 原因分析 由于配置了hadoop环境…

使用Docker Compose搭建Redis哨兵架构

搭建Redis哨兵(sentinel) 之前我们通过深入理解REDIS哨兵原理了解了Redis哨兵(sentinel)的原理&#xff0c;今天我们手动部署一个哨兵架构。要在Docker中搭建Redis哨兵(sentinel)架构&#xff0c;需要Redis的主从实例以及哨兵实例。之前我们已经使用Docker Compose搭建Redis主…

如何一键抠图换背景?分享两个好用的抠图方法

在数字化时代&#xff0c;图片编辑已成为日常生活和工作中不可或缺的一部分。而智能抠图软件&#xff0c;作为近年来兴起的图片处理技术&#xff0c;正引领着图片编辑的新篇章。它利用先进的机器学习和图像识别技术&#xff0c;能够自动识别和分离图片中的主体&#xff0c;实现…

UnityShader——06UnityShader介绍

UnityShader介绍 UnityShader的基础ShaderLab UnityShader属性块介绍 Properties {//和public变量一样会显示在Unity的inspector面板上//_MainTex为变量名&#xff0c;在属性里的变量一般会加下划线&#xff0c;来区分参数变量和临时变量//Texture为变量命名//2D为类型&…

SpringBoot整合GateWay(详细配置)

前言 在Spring Boot中整合Spring Cloud Gateway是一个常见的需求&#xff0c;尤其是当需要构建一个微服务架构的应用程序时。Spring Cloud Gateway是Spring Cloud生态系统中的一个项目&#xff0c;它提供了一个API网关&#xff0c;用于处理服务之间的请求路由、安全、监控和限流…

【测试运维】性能测试经验文档总结第3篇:VuGen详解(已分享,附代码)

本系列文章md笔记&#xff08;已分享&#xff09;主要讨论性能测试相关知识。入门阶段&#xff1a;认识性能测试分类-(负载测试、压力测试、并发测试、稳定性测试)&#xff0c;常用性能测试指标-(吞吐量、并发数、响应时间、点击数...)&#xff0c;性能测试工具选择。性能脚本&…

列表推导式与生成表达式的区别

列表推导式与生成式表达式的区别&#xff1a; 列表推导式 res[i for i in range(6)] print(res) 结果&#xff1a; [0, 1, 2, 3, 4, 5] 生成表达式&#xff1a; res(i for i in range(6)) print(res) 结果&#xff1a; <generator object <genexpr> at 0x0000013EAD0…

linux系统---防火墙

目录 一、防火墙的认识 1.防火墙定义 2.防火墙分类 二、Linux系统防火墙 1.Netfilter 2.防火墙工具介绍 2.1iptables 2.2firewalld 2.3nftables 2.4netfilter的五个勾子函数和报文流向 2.4.1五个勾子 2.4.2三种报文流向 3.iptables 3.1iptables概述 3.2iptables…

Python在金融大数据分析中的AI应用实战

&#x1f482; 个人网站:【 海拥】【神级代码资源网站】【办公神器】&#x1f91f; 基于Web端打造的&#xff1a;&#x1f449;轻量化工具创作平台&#x1f485; 想寻找共同学习交流的小伙伴&#xff0c;请点击【全栈技术交流群】 随着人工智能时代的到来&#xff0c;Python作为…

Java入门教程:介绍、优势、发展历史以及Hello World程序示例

Java入门教学 java语言介绍 Java是由Sun Microsystems公司(已被Oracle公司收购)于1995年5月推出的Java面向对象程序设计语言和Java平台的总称。由James Gosling和同事们共同研发&#xff0c;并在1995年正式推出。 Java分为三个体系&#xff1a; JavaSE&#xff08;J2SE&…

浅谈iPaaS对企业转型的重要性

面对数字化转型的大浪潮&#xff0c;众多企业都期望着能快速实现全面的数字化转型&#xff0c;让企业在日益激烈的竞争中拥有更稳的市场地位&#xff0c;提升自身的实力及能力&#xff0c;奠定更坚实的基底。但在数字化转型过程中&#xff0c;部分企业数字化基础水平较薄弱&…

开源软件:推动软件行业繁荣的力量

文章目录 &#x1f4d1;引言开源软件的优势分析开放性与透明度低成本与灵活性创新与协作 开源软件对软件行业的影响推动技术创新和进步促进软件行业的合作与交流培养人才和提高技能促进软件行业的可持续发展 结语 &#x1f4d1;引言 随着信息技术的飞速发展&#xff0c;软件已经…

设计模式Python实现

过年在家瞎折腾&#xff0c;闲着无聊看到设计模式&#xff0c;于是就想着用Python实现一下。 简单工厂 根据传入的参数决定创建出哪一种产品类的实例。 class CashFactory:def createCashAdapter(self, type):if type "满100减20":return CashReturn(100, 20)elif…

Sora爆火,普通人的10个赚钱机会

您好&#xff0c;我是码农飞哥&#xff08;wei158556&#xff09;&#xff0c;感谢您阅读本文&#xff0c;欢迎一键三连哦。&#x1f4aa;&#x1f3fb; 1. Python基础专栏&#xff0c;基础知识一网打尽&#xff0c;9.9元买不了吃亏&#xff0c;买不了上当。 Python从入门到精通…

spring boot自动装配

第一步需要在pom.xml文件指定需要导入的坐标 要是没有自动提示需要检查maven有没有 实现代码 /*springboot第三方自动配置实现方法 * 什么是自动配置 自动配置就是springboot启动自动加载的类不需要在手动的控制反转自动的加入bean中 * * *//*第一种方案包扫描 不推荐因为繁琐…

2024 VNCTF----misc---sqlshark sql盲注+流量分析

流量分析 wireshark 可以看到很多 any/**/Or/**/(iF(((((Ord(sUbstr((sElect(grOup_cOncat(password))frOm(users)) frOm 1 fOr 1))))in(80))),1,0))# P any/**/Or/**/(iF(((((Ord(sUbstr((sElect(grOup_cOncat(password))frOm(users)) frOm 1 fOr 1))))in(104))),1,0))#…

18-k8s控制器资源-cronjob控制器

job控制器是执行完一次任务&#xff0c;就结束&#xff1b; cronjob控制器&#xff0c;是基于job控制器&#xff0c;定期频率性执行任务&#xff1b;等同于linux系统中的crontab一样&#xff1b; 1&#xff0c;编辑cronjob资源清单 [rootk8s231 pi]# vim cronjob.yaml apiVers…