【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'">

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

相关推荐
i学长的猫3 分钟前
# Hermes + Web UI 本地 Docker 部署指南
前端·ui·docker
yanyu-yaya5 分钟前
css篇之网格grid 学习
前端·css·学习
MandalaO_O5 分钟前
Web 开发:计算机网络知识梳理
前端·网络·计算机网络
lyp90h6 分钟前
Claude Code CLI System Prompt 完整分析
java·前端·prompt
wmm_会飞的@鱼6 分钟前
FlexSim-基于SLP方法的A汽车企业总装车间布局优化
前端·数据结构·数据库·python·数学建模·汽车
2301_815645386 分钟前
JavaScript 核心
javascript
之歆8 分钟前
DAY_23 JavaScript 函数进阶:作用域 · 提升 · 匿名函数 · IIFE · 回调 · 递归 · Object 对象建模(下)
开发语言·javascript·ecmascript
三声三视11 分钟前
Electron鸿蒙桌面应用打包部署完全指南(含自动更新)
前端·electron·前端框架·harmonyos·鸿蒙·桌面端
哆哆啦0011 分钟前
CSS 选择器优先级计算规则
前端·javascript·css3
千寻girling13 分钟前
周日那天参加的力扣周赛... —— 10号
java·javascript·c++·python·算法·leetcode·职场和发展