微信小程序键盘拉起后页面上移问题

小程序的 input 组件聚焦后弹起键盘，自动通过页面上移的方式将输入框所在位置定位到键盘上方。
如果输入框本身就位于页面顶端，则不会造成上推事件，页面看上去很正常很舒服。
但是，如果输入框是位于页面底端，有时候我们只希望输入框定位到键盘上方，而页面其他元素不动。但是很遗憾，小程序并没有提供这样的接口。

比如，在我们开发的小程序“弹幕弹幕”中，用户可以发送弹幕，并得到对话形式的反馈。页面有tabbar和滚动条。如果页面上推，tabbar和滚动条都会被推出页面。页面不美观，同时在对话很少时，用户无法看到对话内容。

针对这一问题，笔者尝试了很多方法，比如页面聚焦后，在inputfocus()属性中将输入框定位到键盘上方。后来发现，由于页面上推是第一事件，之后才进入inputfocus()函数，页面就会在已上推的基础上，对input框再定位，就会导致以下界面：

最后的解决方法：

通过关闭输入框聚焦后的页面上推事件，自动定位输入框位置和滚动条长度来实现的。

• 优点：
  该种方法通过调整相对比例，可以适配所有机型
• 缺点：
  自动定位输入框有延迟，没有原接口流畅。在切换不同输入法时，这种延迟更加明显。

步骤

1. 将input框的adjust-position属性设置为false，即不上推页面。在style中设置bottom或position与js中数据绑定。
2. 在inputfocus()函数中，通过传入的键盘高度参数，调整input组件的相对位置。
3. 在inputblur()函数中，恢复input组件的相对位置

如果需要改变页面其他元素的大小或位置（如，在本项目中，需要缩短scroll-view的长度），在页面对应的js文件的onReady()函数中通过wx.createSelectorQuery()接口求出其他页面元素信息，并设置数据绑定。

代码实现

  onReady: function(){
        var that = this
        var query = wx.createSelectorQuery()
        query.selectAll('#input,.group').boundingClientRect()//查询id=input和class=group的页面元素
        query.exec(function (res) {
            if( res[0][1] == undefined ||  res[0][0] == undefined){
                that.data.totalHeight = 0
                that.data.inputHeight = 0
            }//注，由于有时候执行onReady()函数时，页面并未渲染完成，所以这里进行一次判断
            else{
                console.log("滚动条+输入框高度：" + res[0][1].bottom)
                console.log("输入框高度：" + res[0][0].height + res[0][1].top - res[0][0].bottom)//注：此处为了input框和键盘之间有一些空隙，没有直接使用res[0][0]的height
                that.data.totalHeight = res[0][1].bottom
                that.data.inputHeight = res[0][0].height + res[0][1].top - res[0][0].bottom
            }
        })
    },

    inputFocus: function(e){
        var that = this
        console.log("键盘聚焦")
        if(e.detail.height == 0){
            return//在开发者工具上便于调试，不会造成input框上推
        }
        if(this.data.totalHeight == 0 || this.data.scrollHeight == 0){//onReady()函数中未查询到元素信息，则此处再次查询
            var query = wx.createSelectorQuery()
            query.selectAll('#input,.group').boundingClientRect()
            query.exec(function (res) {
                console.log("滚动条+输入框高度：" + res[0][1].bottom)
                console.log("输入框高度：" + res[0][0].height + res[0][1].top - res[0][0].bottom)
                that.data.totalHeight = res[0][1].bottom
                that.data.inputHeight = res[0][0].height + res[0][1].top - res[0][0].bottom
                //-------计算元素的位置 ，这里就取决于具体实现方式了。此处是通过定位input框的top值和scroll-view的长度来实现的-----------
                var ratio = 100 * (this.data.totalHeight  - e.detail.height - this.data.inputHeight)/ this.data.totalHeight
                this.setData({
                    inputTop: ratio,
                    scrollHeight: ratio - 1
                })
                setTimeout(function(){
                    that.setData({
                        array: that.data.array,
                        toView: "view" + String(that.data.array.length-1),
                    })
                }, 50)//由于滚动条的高度改变，需要间隔一定时间后重新渲染数组，否则数组元素不会自适应滚动条大小进行调整。
            })
        }
        else{
            var ratio = 100 * (this.data.totalHeight  - e.detail.height - this.data.inputHeight)/ this.data.totalHeight
            console.log(ratio)
            this.setData({
                inputTop: ratio,
                scrollHeight: ratio - 1
            })
            setTimeout(function(){
                that.setData({
                    array: that.data.array,
                    toView: "view" + String(that.data.array.length-1)
                })
            }, 50)
        }
    },
  

inputBlur: function(){
        console.log("键盘失焦")
        this.setData({
            inputTop: 82,
            scrollHeight: 81,
            toView: "view" + String(this.data.array.length-1)
        })
    },

最后的效果

一些坑和注意事项

1. onReady()函数有时候会在页面并没有渲染完成的条件下触发，需要做异常处理
2. onReady()函数中query到的元素信息在网络情况不好的情况下可能和真实值不同。比如我的滚动条高度在极个别的调试案例中会会出现10px左右的偏差...应该和小程序的页面渲染和js逻辑是多线程有关？
3. 如果用到了滚动条并需要调整滚动条的长度，一定要设置定时器（一般来说>50ms），在重定位后重新渲染滚动条上的数组元素。
4. 吐槽一句，希望小程序能提供提供只上推的input框的接口，这种方法实在太笨了....调定位的时候要不断真机测试调参数....如果大家有更好的方法欢迎留言鸭！