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

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

相关推荐
晴天164 分钟前
HTML canvas标签使用指南-Day32
前端·html
weixin199701080168 分钟前
《alibaba.idle.isv.order.ship 接入实录:闲鱼订单发货回传的5个隐式约束》(附Python源码)
服务器·前端·python
初願致夕霞15 分钟前
五种IO模型(详解非阻塞IO与多路转接)
linux·前端·网络·数据库·tcp/ip
深圳多奥智能一卡(码、脸)通系统17 分钟前
智能梯控SDK可直接用于第三方开发对接的接口文档说明书
服务器·前端·算法
RisunJan21 分钟前
uni-app 面试知识点梳理
面试·职场和发展·uni-app
烂蜻蜓26 分钟前
Flask入门教程(十五):错误处理与日志——打造健壮的Web应用
前端·python·flask
深念Y33 分钟前
浏览器缩放检测的前端通用方案
前端
风骏时光牛马41 分钟前
AIAgent异常故障根因分析与复盘总结
前端
weixin_4316004442 分钟前
前端数据埋点(7):Web Vitals——页面慢不慢,不是再包一层 fetch
前端·性能优化·sentry·数据埋点
এ慕ོ冬℘゜2 小时前
前端实战:jQuery实现动态表格渲染与状态切换功能
前端·javascript·jquery