微信小程序表单输入框与手机键盘

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

获取焦点后的页面：

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

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

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

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

**wxml**
  

`
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,
    });
},

`