https://blog.csdn.net/qq_38296051/article/details/109290225
https://blog.csdn.net/qq_42231156/article/details/103490964
https://www.cnblogs.com/rachelch/p/12858938.html
1、 安卓键盘弹起会触发页面的resize 事件(ios不会),所以可以通过判断页面高度的前后变化来判断键盘的状态。
2、 ios 在键盘收起的时候input 会失去焦点(安卓不会),所以可以通过input 的focus 和 blur 事件来判断键盘的状态
<van-search
v-model="value"
placeholder="搜索"
@focus="searchFocus"
@blur="searchBlur"
/>
...
<app-tabbar v-show="showTabbar"></app-tabbar>
showTabbar: true,
originHeight: '',
mounted() {
this.originHeight = document.documentElement.clientHeight || document.body.clientHeight;
window.addEventListener('resize',this.handleResize);
this.onLoad();
},
isIos() {
var m = navigator.userAgent;
var isIos = !!m.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/);
let result = isIos ? true : false;
return result;
},
searchFocus() {
if (this.isIos()) {
this.showTabbar = false;
console.log(this.showTabbar,'ios---隐藏底部栏');
}
},
searchBlur() {
if (this.isIos()) {
this.showTabbar = true;
console.log(this.showTabbar,'ios---显示底部栏');
}
},
handleResize() {
var resizeHeight = document.documentElement.clientHeight || document.body.clientHeight;
if (resizeHeight < this.originHeight) {
//当软键盘弹起,在此处操作
if (!this.isIos()) {
this.showTabbar = false;
console.log(this.showTabbar,'安卓---隐藏底部栏');
}
} else {
//当软键盘收起,在此处操作
if (!this.isIos()) {
this.showTabbar = true;
console.log(this.showTabbar,'安卓---显示底部栏');
}
}
},
beforeDestroy() {
// 移除绑定的handleResize事件监听
window.removeEventListener("resize",this.handleResize);
console.log('移除resize监听');
},