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

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

相关推荐
BUG创建者2 分钟前
uni 拍照上传拍视频上传以及相册
前端·javascript·音视频
就是帅我不改9 分钟前
敏感词过滤黑科技!SpringBoot+Vue3+TS强强联手,打造无懈可击的内容安全防线
前端·vue.js·后端
JackJiang10 分钟前
转转客服IM系统的WebSocket集群架构设计和部署方案
前端
codeGoogle10 分钟前
大厂研发之谜:千亿投入砸出利润大缩水
前端·人工智能·后端
菲兹园长32 分钟前
CSS(展示效果)
前端·javascript·css
我的收藏手册44 分钟前
性能监控shell脚本编写
前端·git·github
fantasy_arch1 小时前
SVT-AV1编码器中实现WPP依赖管理核心调度
java·前端·av1
UNbuff_01 小时前
HTML 中的 CSS 使用说明
css·html·tensorflow
香香甜甜的辣椒炒肉1 小时前
vue(7)-单页应用程序&路由
前端·javascript·vue.js
高级测试工程师欧阳1 小时前
HTML 表格基础
前端