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

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

相关推荐
初见雨夜3 分钟前
提测前让 AI 检查一下代码,我的 Bug 率降低了 20%
前端·ai编程
光影少年4 分钟前
react的 useState 原理、批量更新机制
前端·react.js·掘金·金石计划
叫我少年4 分钟前
Markdown 备忘清单
前端
酒吧舞高材生9 分钟前
vue3 PC端-索引列表组件
前端·vue.js
咪饭只吃一小碗10 分钟前
从变量提升到 V8 预编译,彻底搞懂 JS 执行机制
javascript
农夫三拳有点疼=-=11 分钟前
vue3实现输入框标签和文本交互
javascript·vue.js·交互
2301_7807896615 分钟前
多层级 CC 防护体系:前端验证与后端限流的协同配置实践
运维·服务器·前端·网络安全·智能路由器·状态模式
ZC跨境爬虫17 分钟前
跟着MDN学HTML_day_47:(Document接口)
前端·javascript·ui·html·ecmascript·音视频
sheeta199821 分钟前
vue_vuex笔记
javascript·vue.js·笔记