【uniapp】 软键盘弹出后fixed定位被顶上去问题

问题描述

当手机设计的导航栏为fixed定位上去时,输入框获取焦点就会把顶部自定义的导航栏顶到上面去,如下图所示

解决办法

输入框设置 :adjust-position="false"

复制代码
<input type="text"  :adjust-position="false" @focus="inputBindFocus" @blur="outBindFocus"/>

当输入框获取焦点时获取到软键盘的高度,方法为inputBindFocus

复制代码
inputBindFocus(e) {
if (e.detail.height) {
	   this.fixTop = e.detail.height //这个高度就是软键盘的高度
  }
 },

失去焦点时的 方法

复制代码
outBindFocus() {
				this.fixTop = 0;
			},

然后把fiexTop给弹窗的最外层加上padding就好了

复制代码
<view class="popCon" :style="'padding-bottom:'+fixTop+'px'">

亲测有效,哈哈,但是有一点延迟,不知道大佬有没有好的解决办法,欢迎评论

相关推荐
candyTong11 分钟前
Claude Code 每次调用 API 时,上下文是怎么"拼"出来的?
javascript·后端·架构
小林ixn15 分钟前
别再背“变量提升”了!深入编译执行,彻底搞懂 JavaScript 运行机制
javascript
用户8524950718417 分钟前
为什么变量能 未定义先使用?
javascript·程序员
Larcher40 分钟前
JS 变量提升:代码没动,为什么执行顺序就变了?
前端·javascript·前端框架
yingyima41 分钟前
MySQL 事件调度器速查:核心语法与实战代码
前端
GISer_Jing41 分钟前
Claude Code多Agent架构深度剖析
前端·人工智能·架构·自动化
comphub42 分钟前
comp-hub:让你的 Vue 业务组件真正"活"起来
前端
AI砖家44 分钟前
Claude Code 跳过确认完全指南:让 AI 自己完成开发任务
前端·人工智能·python·ai编程·代码规范
KaMeidebaby1 小时前
卡梅德生物技术快报|Pull Down 实验在 lncRNA - 蛋白互作机制研究中的应用实例解析
大数据·前端·架构·spark·新浪微博
锋行天下1 小时前
让nginx网关扛下所有攻击
前端·后端·nginx