android软键盘弹出底部有黑色闪出,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'});

}

})

解决。欢迎留言交流