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

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

相关推荐
大锅盖15 分钟前
Web 工单要调用相机,第一步不是打开取景框,而是建立能力门禁
前端·数码相机·harmonyos
fthux5 分钟前
不必下载整个仓库:GitZip Pro 让 GitHub 文件与文件夹批量下载更简单
前端·chrome·ai·edge·开源·github·firefox
奥莱维13 分钟前
【无标题】
java·前端·javascript
用户9210802628617 分钟前
0. 为什么我们的项目选择 Cesium:从三维地图、离线部署到工程代价
前端
阿懂在掘金22 分钟前
同一份弹窗我重构了三次:从 v-model 地狱到路由式调用,终于治好了模板臃肿
前端·vue.js·前端框架
悟空瞎说22 分钟前
从 CRA 到 Vite:含 Cesium 的真实项目迁移实战记录
前端
悟空瞎说23 分钟前
Vite 中零配置接入 Cesium.js:vite-plugin-cesium-engine 深度解析
前端
To_OC33 分钟前
后端接口还没交付,前端如何独立把整套业务跑通
前端·react.js·全栈
王琦031842 分钟前
WEB服务
前端
霹雳桃44 分钟前
Vue3 + Vite 构建版本注入实战:一份 version.json 终结「线上到底是哪一版」
前端