安卓使用软键盘输入后查询,better-scroll的提示信息会出现在页面上
错误原因:软键盘将可视区域高度缩小,better-scroll里的base-scroll-list-wrapper高度缩小,base-scroll-pulldown就会 在页面中显示(正常情况下,base-scroll-list-wrapper的高度是可视区域高度,base-scroll-pulldown在可视区域外面)
解决办法:判断软键盘是否收起,如果收起,就调用better-scroll实例的refresh()方法,重新计算base-scroll-list-wrapper的高度
js
// 监控安卓手机键盘是否收起,如果收起,就调用bScroll的refresh方法,重新计算高度
keyboardCollapsedBScrollRefresh() {
const _this = this
let originHeight = document.documentElement.clientHeight || document.body.clientHeight
window.addEventListener('resize', () => {
const resizeHeight = document.documentElement.clientHeight || document.body.clientHeight
// Android 键盘收起后操作
if (originHeight < resizeHeight) {
// 这块有时候会报找不到refresh方法的错误(未处理)
_this.$refs.bScroll.refresh()
}
originHeight = resizeHeight
}, false)
}
温馨提示
base-scroll-list-wrapper和base-scroll-pulldown都是better-scroll封装的组件里的div,详情可以查看 基础组件里的scroll组件