微信小程序表单输入框与软键盘引起页面上移

当输入框获取焦点时，键盘就会被弹出，这时会出现一个问题，页面会被往上顶，我们自定义导航栏区域就会顶上去：
未获取焦点时的页面：

获取焦点后的页面：

我们查看https://developers.weixin.qq.com/miniprogram/dev/component/in...的input输入框的api发现了：

进而去设置输入框的属性adjust-position为false
但是，这时会出现一个问题，输入框会被弹出的键盘挡住，我们无法看到当前输入框输入的内容:
(操作：点击“21、”下面的输入框，可以发现键盘已经把它挡住了)

这时去查了一下资料，发现：

然后去设置了发现没效果，后面就做了以下解决方案（仅个人当前见解）：
input输入框设置：

**wxml**
<view
        id="page"
        style="margin-top: {{height+34}}px;width:{{width*0.95}}px;height: {{windowHeight+KeyboardHeight}}px;"
    >
  <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}}"//会把数据传到输入框所有的事件中
   />
</view>

app.js

 globalData: {
        windowHeight: "",
        windowWidth: "",
        height:""
    }, 
onLaunch() {
        wx.getSystemInfo({
            success: (res) => {
                this.globalData.height = res.statusBarHeight;
            },
        });
    },
    onShow(options) {
        this.globalData.windowWidth = wx.getSystemInfoSync().windowWidth;
        this.globalData.windowHeight = wx.getSystemInfoSync().windowHeight;
    },

js

 data: {
        height: app.globalData.height * 2 + 20,
        width: app.globalData.windowWidth,
        windowHeight: app.globalData.windowHeight,
        bloodNeutrophilPercentage: null, 
        KeyboardHeight: 0,
    },
    //获取焦点事件
    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,
        });
    },

---

---

                                         代码优化

wxml

//优化内容是把height换成padding-bottom，并且把值改为KeyboardHeight
<view
        id="page"
        style="margin-top: {{height+34}}px;width:{{width*0.95}}px;padding-bottom: {{KeyboardHeight}}px;"
    >
  <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}}"//会把数据传到输入框所有的事件中
   />
</view>

js

//获取焦点事件
onFocus(event) {
    let { height } = event.detail; //键盘高度
    let { name } = event.currentTarget.dataset;//获取不同输入框名称
    let { windowHeight } = this.data;//当前设备高度
    //获取元素节点信息
    var query = wx.createSelectorQuery();
    query.select(`.${name}`).boundingClientRect();
    query.selectViewport().scrollOffset();
    query.exec((rect) => {
        let current = rect[0]; //当前输入框位置信息(top、bottom)
        let { scrollTop } = rect[1]; //当前滚动距离
        this.setData({
            scrollTop: scrollTop,//把当前滚动条位置保存
        });
        const bottom = windowHeight - current.bottom; //输入框距离底部的位置
        if (bottom < height) {//当输入框距离可视区域底部位置小于键盘高度时
            //当输入框被遮挡时
            let distance = height - bottom;
       //只有通过增设置padding-bottom足够的值让页面有足够的长度，滚动方法才能生效
            this.setData({
                KeyboardHeight: height + 1100,
            });
            wx.pageScrollTo({
                selector: "#page", // 写法同css选择器
                scrollTop: scrollTop + distance+20,
            });
        }
    });
},