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

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

相关推荐
未来龙皇小蓝2 小时前
RBAC前端架构-05:引入Element-UI及相关逻辑
前端·ui
yanlele2 小时前
AI Coding 时代下, 关于你会写代码这件事儿, 还重要吗?
前端·javascript·ai编程
打瞌睡的朱尤3 小时前
Vue day9 购物车,项目,vant组件库,vw,路由
前端·javascript·vue.js
星火开发设计5 小时前
模板参数:类型参数与非类型参数的区别
java·开发语言·前端·数据库·c++·算法
cc.ChenLy7 小时前
【CSS进阶】毛玻璃效果与代码解析
前端·javascript·css
何中应7 小时前
使用Jenkins部署前端项目(Vue)
前端·vue.js·jenkins
西门吹-禅7 小时前
node js 性能处理
开发语言·javascript·ecmascript
3秒一个大7 小时前
JWT 登录:原理剖析与实战应用
前端·http·代码规范
一只大侠的侠7 小时前
React Native for OpenHarmony:日期范围选择器实现
javascript·react native·react.js
NEXT067 小时前
2026 技术风向:为什么在 AI 时代,PostgreSQL 彻底成为了全栈工程师的首选数据库
前端·数据库·ai编程