当输入框获取焦点时，键盘就会被弹出，这时会呈现一个问题，页面会被往上顶，咱们自定义导航栏区域就会顶上去：
未获取焦点时的页面：
获取焦点后的页面：
咱们查看https://developers.weixin.qq.com/miniprogram/dev/component/in...的input输入框的api发现了：
进而去设置输入框的属性adjust-position为false
然而，这时会呈现一个问题，输入框会被弹出的键盘挡住，咱们无奈看到以后输入框输出的内容:
(操作：点击“21、”上面的输入框，能够发现键盘曾经把它挡住了)
这时去查了一下材料，发现：
而后去设置了发现没成果，前面就做了以下解决方案（仅集体以后见解）：
input输入框设置：
**wxml** <input class="bloodNeutrophilPercentage" name="bloodNeutrophilPercentage" model:value="{{bloodNeutrophilPercentage}}" type="text" placeholder="请填写" adjust-position="{{false}}"//勾销键盘弹出时主动上推页面 bind:focus="onFocus"//获取焦点事件 data-name="bloodNeutrophilPercentage"//会把数据传到输入框所有的事件中 bind:blur="onBlur"//输入框失去焦点事件 data-ratio="{{1}}"//会把数据传到输入框所有的事件中 />`
js
//获取焦点事件onFocus(event) { let { height } = event.detail; //键盘高度 let { name, ratio } = event.currentTarget.dataset;//输入框标签上设置的 data-name或data-ratio的值 var query = wx.createSelectorQuery();//获取界面上的节点信息 query.select(`.${name}`).boundingClientRect(); query.selectViewport().scrollOffset();//加着一行，能力获取到以后页面滚动数 据 query.exec((rect) => { let { scrollTop } = rect[1];//以后滚动间隔 this.setData({ scrollTop: scrollTop,//存以后滚动间隔 }); //依据相应场景设置 //this.data.windowHeight为以后设施长度（也叫以后可视窗口长度） //把可视窗口分为七分，判断以后输入框在可视窗口的占比是否小于键盘高度 if (this.data.windowHeight * (ratio / 7) < height) { //把以后页面长度设置的大一些，否则上面设置的滚动没成果 //KeyboardHeight是设置页面长度是让页面长度+KeyboardHeight （KeyboardHeight初始值为0） this.setData({ KeyboardHeight: height * 0.56 + 1100 }); } //设置页面滚动 wx.pageScrollTo({ selector: "#page", // 写法同css选择器 scrollTop: scrollTop + height * 0.56, }); });},//失去焦点事件onBlur() { let { scrollTop } = this.data; this.setData({ KeyboardHeight: 0 });//复原点击输入框之前的滚动地位 wx.pageScrollTo({ selector: "#page", // 写法同css选择器 scrollTop: scrollTop, });},`