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

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

相关推荐
我是苏苏1 小时前
Web开发:C#通过ProcessStartInfo动态调用执行Python脚本
java·服务器·前端
无羡仙2 小时前
Vue插槽
前端·vue.js
哈__2 小时前
React Native 鸿蒙跨平台开发:PixelRatio 像素适配
javascript·react native·react.js
2501_915918412 小时前
只有 Flutter IPA 文件,通过多工具组合完成有效混淆与保护
android·flutter·ios·小程序·uni-app·iphone·webview
用户6387994773052 小时前
每组件(Per-Component)与集中式(Centralized)i18n
前端·javascript
SsunmdayKT2 小时前
React + Ts eslint配置
前端
开始学java2 小时前
useEffect 空依赖 + 定时器 = 闭包陷阱?count 永远停在 1 的坑我踩透了
前端
zerosrat2 小时前
从零实现 React Native(2): 跨平台支持
前端·react native
狗哥哥3 小时前
🔥 Vue 3 项目深度优化之旅:从 787KB 到极致性能
前端·vue.js
青莲8433 小时前
RecyclerView 完全指南
android·前端·面试