【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 小时前
领域层的服务
java·前端·数据库
星栈15 小时前
LiveView 的 LiveComponent:比 React 组件更轻,但我一开始真的把它用错了
前端·前端框架·elixir
竹林81815 小时前
用 Pinata + IPFS 存 NFT 元数据踩了三天坑,我总结了这份完整的前端实现方案
javascript
林希_Rachel_傻希希15 小时前
web性能优化之延迟加载图片和<inframe>
前端·javascript·面试
maxmaxma15 小时前
Konva 从入门到实践 - day1
前端
火星校尉15 小时前
一场数据基建与消费场景的跨界实验
java·前端·数据库·python·php
W是笔名15 小时前
python_let`s try it 6___BMI计算器
java·前端·python
risc12345615 小时前
Lucene80DocValuesConsumer 五种类型源码阅读顺序
java·服务器·前端
小米渣的逆袭16 小时前
Chrome Extension Script World(ISOLATED / MAIN)原理与适用场景
前端·javascript·chrome
微信开发api-视频号协议16 小时前
Codex++安全边界探秘:从模型能力到风险防御
前端·安全·微信·企业微信