- 这里的解决方法是安卓监听窗口高度,iOS监听文本块焦点,以实现隐藏与显示底部固定定位元素
// 以下为vue2的写法
// originHeight为窗口高度,当键盘弹出时,android手机会改变,监听变化控制下方固定按钮是否显示
// ios手机input框聚焦键盘弹出,键盘收起时,input框会失去焦点,因此给input框或者textarea框添加focus和blur事件,绑定searchFocus和searchBlur方法
data() {
return {
originHeight: 0,
showTabbar: true
}
}
mounted() {
this.originHeight = document.documentElement.clientHeight || document.body.clientHeight
window.addEventListener('resize', this.handleResize)
},
created() {
this.initPage(this.unid)
},
destroyed() {
window.removeEventListener('resize', this.handleResize)
window.removeEventListener('scroll', this.scroll)
},
methods: {
// 判断ios
isIos() {
var m = navigator.userAgent
return /iP(hone|od|ad)/.test(m)
},
// ios使用,监听输入框聚焦
searchFocus() {
if (this.isIos()) {
this.showTabbar = false
console.log(this.showTabbar, 'ios隐藏底部栏')
}
},
// 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, '安卓显示底部栏')
}
}
},
标签:isIos,ios,showTabbar,H5,键盘,弹出,挤上来,底部,监听
From: https://www.cnblogs.com/jia-zq/p/16659653.html