【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 分钟前
【Vue】表格实现表头多彩
javascript·vue.js·ecmascript
我是天龙_绍2 分钟前
如何在前端开发中高效运用AI:从提效到避坑
前端
KenXu4 分钟前
从Vue 到 React:Valtio 让状态管理更熟悉
前端
JS_GGbond8 分钟前
用Canvas和SVG制作简单动画:从零开始的视觉魔法
javascript
努力学习的少女14 分钟前
对SparkRDD的认识
开发语言·前端·javascript
LYFlied18 分钟前
Webpack 深度解析:从原理到工程实践
前端·面试·webpack·vite·编译原理·打包·工程化
van久39 分钟前
.Net Core 学习:Razor Pages中 HTML 表头字段的两种写法对比
学习·html·.netcore
苏打水com43 分钟前
第十二篇:Day34-36 前端工程化进阶——从“单人开发”到“团队协作”(对标职场“大型项目协作”需求)
前端·javascript·css·vue.js·html
知了清语44 分钟前
为天地图 JavaScript API v4.0 提供 TypeScript 类型支持 —— tianditu-v4-types 正式发布!
前端
程序员Sunday1 小时前
为什么 AI 明明写后端更爽,但却都网传 AI 取代前端,而不是 AI 取代后端?就离谱...
前端·后端