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

  • 相关阅读:
    [洛谷P4585] [FJOI2015] 火星商店问题
    [bzoj4311] 向量
    [bzoj4977] [Lydsy1708月赛] 跳伞求生
    sdut-1153 C语言实验——求两个整数之中较大者
    sdut_1116
    sdut_1189
    汉诺塔
    二分查找
    类似二分查找算法
    [YTU]_2922(Shape系列-8)
  • 原文地址:https://www.cnblogs.com/Mr-Rshare/p/10694566.html
Copyright © 2011-2022 走看看