Skip to content

安卓使用软键盘输入后查询,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组件

如有转载或 CV 的请标注本站原文地址