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

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

相关推荐
小陆猿10 小时前
股票实时行情Echarts动态图表
前端·javascript
Dilettante25810 小时前
React Server Components 全链路解析:Next.js 构建产物、导航流程与 Payload 格式
前端·next.js
前端付豪10 小时前
Nest 项目小实践之注册登陆
前端·node.js·nestjs
用户91219176206110 小时前
日本股票K线图生成实战:基于API的完整对接方案
前端
牛奶10 小时前
JS随笔:ES6+特性与模块化实践
前端·javascript
牛奶10 小时前
JS随笔:基础语法与控制结构
前端·javascript
天蓝色的鱼鱼10 小时前
Node.js 中间层退潮:从“前端救星”到“成本噩梦”
前端·架构·node.js
货拉拉技术10 小时前
如何用 AI 做业务级 Code Review
前端·agent·前端工程化
李剑一11 小时前
前端圈子又出新东西了,大幅提升解析速度。尤雨溪推荐,但我不太推荐
前端
前端Hardy11 小时前
HTML&CSS&JS:基于定位的实时天气卡片
javascript·css·html