最近在开发微信公众号的时候发现了一个安卓兼容性问题。
大家都知道IOS在input框获取焦点的时候会弹起软键盘,点击完成input会自动失去焦点,但是安卓不能。在微信浏览器中会发现给footer添加了position:fixed之后安卓机会出现软键盘将footer顶起的现象。这时我想到的第一解决方案就是监听软键盘事件。
于是我决定通过监听页面的可是高度的变化,控制footer的position属性;代码如下:
首先先定义变量:
data(){
return{
clientHeight:""//可视高度
}
}
其次需要在vue的钩子函数mounted里面去挂载window.onresize方法:
mounted(){
this.clientHeight = `${document.documentElement.clientHeight}`
window.onresize = () => {
this.clientHeight = `${document.documentElement.clientHeight}`
}
}
最后就是监听clientHeight的变化了:
watch:{
clientHeight(newvalue,oldvalue){
if(newvalue < oldvalue){
//改变footer的定位属性值
$('footer').css('position','static')
//或者改变footer的显示与隐藏
//$('footer').css('display','none')
}else{
//改变footer的定位属性值
$('footer').css('position','fixed')
//或者改变footer的显示与隐藏
//$('footer').css('display','block')
}
}
}
好了,这样就完美解决。