栏目分类:
子分类:
返回
名师互学网用户登录
快速导航关闭
当前搜索
当前分类
子分类
实用工具
热门搜索
名师互学网 > IT > 软件开发 > 后端开发 > Java

移动端安卓系统键盘弹起再收起页面无法滚动问题

Java 更新时间: 发布时间: IT归档 最新发布 模块sitemap 名妆网 法律咨询 聚返吧 英语巴士网 伯小乐 网商动力

移动端安卓系统键盘弹起再收起页面无法滚动问题

首先,要在安卓系统出现这种情况经过我反复测试需要满足两种情况,才会触发:
1、最外层样式高度使用100vh;
2、页面内容高度没有撑满一屏;

解决方式:
通过监听键盘弹起、收缩来更改高度值
html

js

mounted() {
    this.keyboardListener();
},
// 一定要记得移除监听啊
beforeDestroy() {
    window.removeEventListener("resize", this.judgeKeyboardState);
},
// 监听键盘
    keyboardListener() {
      this.originHeight = document.documentElement.clientHeight || 			        documentElement.body.clientHeight;
      window.addEventListener("resize", this.judgeKeyboardState);
    },
    // 判断是键盘弹起还是收起
    judgeKeyboardState() {
      const resizeHeight = document.documentElement.clientHeight ||
        documentElement.body.clientHeight;
      var u = navigator.userAgent;
      let isAndroid = u.indexOf("Android") > -1 || u.indexOf("Adr") > -1; //android终端
      if (isAndroid) {
        if (resizeHeight < this.originHeight) {
          // 键盘弹起
          document.querySelector('.wrapper').setAttribute('style', 'height:100vh;')
        } else {
          // 键盘收起
          this.$refs.toolbar.$refs.search.blur();
          if (this.$el.querySelector(".van-tabs__content").scrollHeight < this.$refs.main.clientHeight) {
          document.querySelector('.wrapper').setAttribute('style', 'height:' + this.originHeight + 'px;')
        } else {
          document.querySelector('.wrapper').setAttribute('style', 'height:100vh;')
        }
        }
      }
    },

参考来源https://www.jianshu.com/p/e0408b1d57ac

转载请注明:文章转载自 www.mshxw.com
本文地址:https://www.mshxw.com/it/489845.html
我们一直用心在做
关于我们 文章归档 网站地图 联系我们

版权所有 (c)2021-2022 MSHXW.COM

ICP备案号:晋ICP备2021003244-6号