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

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

相关推荐
Never_Satisfied4 小时前
在JavaScript / HTML中,所有转义字符(字符实体)
html·转义字符·字符实体
IT_陈寒4 小时前
JavaScript性能飞跃:5个V8引擎优化技巧让你的代码提速300%
前端·人工智能·后端
艾小码4 小时前
这份超全JavaScript函数指南让你从小白变大神
前端·javascript
reembarkation4 小时前
vue 右键菜单的实现
前端·javascript·vue.js
00后程序员张6 小时前
Fiddler抓包工具使用教程,代理设置与调试方法实战解析(含配置技巧)
前端·测试工具·ios·小程序·fiddler·uni-app·webview
gplitems12310 小时前
Consua WordPress Theme — Business Consulting Sites That Convert With Clarity
javascript
雾削木11 小时前
stm32解锁芯片
javascript·stm32·单片机·嵌入式硬件·gitee
2301_7683502312 小时前
Vue第二期:组件及组件化和组件的生命周期
前端·javascript·vue.js
小周同学:12 小时前
Vue项目中将界面转换为PDF并导出的实现方案
javascript·vue.js·pdf
华洛13 小时前
公开一个AI产品的商业逻辑与设计方案——AI带来的涂色卡自由
前端·后端·产品