zoukankan      html  css  js  c++  java
  • h5软键盘弹起 底部按钮被顶起问题解决

    解决思路:
    当键盘弹起时隐藏掉按钮,键盘隐藏时按钮显示
    监测键盘是否弹起(浏览器页面是否发生变化)
    代码:
    1、定义一个底部按钮

    <div class="returnbtn" v-show="isOriginHei" :class="{active: canSubmit}" v-on:click="sendSubmit()">提交</div>


    2、设置默认显示和两个屏幕的初始值(此处定义在vue的data中)

      isOriginHei: true,
      screenHeight: document.documentElement.clientHeight, //此处也可能是其他获取方法
      originHeight: document.documentElement.clientHeight,


    3、在mounted里面挂载检测浏览器变化

      mounted() {
        let self = this;
        window.onresize = function() {
          return (function(){
            self.screenHeight = document.documentElement.clientHeight;
          })()
        }
      }


    4、在watch中监测屏幕变化

      screenHeight (val) {
        if(this.originHeight > val + 100) { //加100为了兼容华为的返回键
          this.isOriginHei = false;
        }else{
          this.isOriginHei = true;
        }
      }


    作者:kuke_kuke
    来源:CSDN
    原文:https://blog.csdn.net/qq_33599109/article/details/79086411

  • 相关阅读:
    上下文管理器
    创建项目与介绍(2)
    虚拟环境的安装(1)
    爬虫-selenium(14-2)扩展
    爬虫10-1(协程)
    Python3笔记038
    Python3笔记037
    Python3笔记036
    Python3笔记035
    Python3笔记034
  • 原文地址:https://www.cnblogs.com/Mr-Rshare/p/10694566.html
Copyright © 2011-2022 走看看