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
},

最近更新

  1. docker php8.1+nginx base 镜像 dockerfile 配置

    2024-02-19 06:36:05       94 阅读
  2. Could not load dynamic library ‘cudart64_100.dll‘

    2024-02-19 06:36:05       100 阅读
  3. 在Django里面运行非项目文件

    2024-02-19 06:36:05       82 阅读
  4. Python语言-面向对象

    2024-02-19 06:36:05       91 阅读

热门阅读

  1. Leetcode 16-20题

    2024-02-19 06:36:05       56 阅读
  2. 【uniapp】自定义步骤条样式

    2024-02-19 06:36:05       43 阅读
  3. uni-app自定义tabbar(van-tabbar)

    2024-02-19 06:36:05       48 阅读
  4. AI趋势(06) Sora,AI对世界的新理解

    2024-02-19 06:36:05       50 阅读
  5. react 实现路由拦截

    2024-02-19 06:36:05       48 阅读
  6. 深入理解nginx的动态变量机制【上】

    2024-02-19 06:36:05       37 阅读
  7. golang 获取域名 ip dns 信息

    2024-02-19 06:36:05       53 阅读
  8. Redis分布式可重入锁实现方案

    2024-02-19 06:36:05       41 阅读
  9. 正则表达式的应用

    2024-02-19 06:36:05       40 阅读