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