vue移动端安卓软键盘弹出底部按钮顶起

在做一个基于企业微信的h5移动页面时，当软键盘弹出时，底部fixed定位在ios上没事，安卓手机上，底部按钮会被顶起到软键盘，查看原应时由于软键盘顶起时，安卓设备的视图会变小。造成固定定位按钮呗顶起。多方查询，并且自己用过后，觉得下面两种方式各有利弊。闲话不说了，看代码吧

一、显示隐藏处理

这种处理有点局限性，不关闭软键盘，底部按钮不会显示出来。好处是不会卡顿。

data () {
        return {
            screenHeight: document.body.clientHeight,   // 这里是给到了一个默认值
            originHeight: document.body.clientHeight,   // 默认高度在watch里拿来做比较
            isOriginHei :true,                          // 这个属性是固定定位按钮的显隐开关
            
    },

mounted () {
        //处理软键盘弹出底部固定定位按钮顶起问题
        let self = this
        window.onresize = () => {
            return (() => {
                self.screenHeight= document.body.clientHeight
            })()
        }
    },

watch: {
        screenHeight (val) {
            // 判断软键盘弹出，收起
            if(this.originHeight-val > 50) {
                // 键盘弹出
                this.isOriginHei = false
            }else{
                // 键盘收起
                this.isOriginHei = true
            }
        }
    },

最好在离开页面后注销掉

beforeDestroy () {
     window.onresize = null;     //注销window.onresize事件
 },

二、使用jq处理

这种处理方法解决了第一种的问题，但是会有点卡顿。
直接在页面的js内加入如下代码。
键盘弹出时，将固定去掉。键盘收起时，加入固定定位。

// 解决安卓软键盘弹出底部按钮顶起
var winHeight = $(window).height();  //获取当前页面高度
$(window).resize(function () {
    var thisHeight = $(this).height();
    if ( winHeight - thisHeight > 140 ) {
        //键盘弹出
        $('.btn').css('position','static');
    } else {
        //键盘收起
        $('.btn').css({'position':'fixed','bottom':'0'});
        
    }
})

解决。欢迎留言交流