混合开发笔记6——解决h5页面在手机端键盘弹起事件

落日映苍穹つ 2022-12-02 00:46 277阅读 0赞

**描述**：app嵌入h5页面，当页面内有**脚部固定导航**时，键盘弹起，固定导航栏的位置也会弹起  
**解决**：使用监听**watch**以及**window.onresize()** 窗口发生变化时函数  
html

<div class="footer"
           v-show="isOriginHeight">
        
      </div>

方法

<script>
    export default { 
      data() { 
        return { 
          screenHeight: document.documentElement.clientHeight, // 当前高度
          originHeight: document.documentElement.clientHeight, //默认高度，用作比较
          isOriginHeight: true, //当前高度是否仍等于默认高度
        }
      },
      mounted() { 
        // console.log(this.screenHeight, this.originHeight)
        // 浏览器窗口改变时触发函数
        window.onresize = () => { 
          return (() => { 
            this.screenHeight = document.documentElement.clientHeight
          })()
        }
      },
      watch: { 
        // 监听watch变化，判断高度是否改变，改变isOriginHeight 字段
        screenHeight(val) { 
          if (this.originHeight - val > 48) { 
            //这里以防万一改了下判断形式，当屏幕高度减少了48px以上时才隐藏footer
            this.isOriginHeight = false
          } else { 
            // console.log(this.originHeight - val)
            this.isOriginHeight = true
          }
        },
      },
    }
    </script>

css

.footer { 
      width: 100%;
      height: 0.48rem;
      line-height: 0.48rem;
      padding: 0 0.12rem;
      position: fixed;
      bottom: 0;
      left: 0;
      border-top: 0.005rem solid #DDD;
      display: flex;
      justify-content: space-between;
      background: #fff
    }

发表评论取消回复

表情：

评论列表（有 0 条评论，277人围观）

还没有评论，来说两句吧...

相关阅读

相关 uni-app：H5页面软键盘弹起，底部元素不弹起

CSS 使用Flex布局让元素保持在页面底部（使用absolute或者fixed布局可以使元素保持在页面底部，但是软键盘弹起时元素也跟着一起弹起）（安卓机） <!

不念不忘少年蓝@/ 2023年06月12日 14:30/ 0 赞/ 108 阅读

相关混合开发笔记6——解决h5页面在手机端键盘弹起事件

描述：app嵌入h5页面，当页面内有脚部固定导航时，键盘弹起，固定导航栏的位置也会弹起解决：使用监听watch以及window.onresize() 窗口发生变化时函数

落日映苍穹つ/ 2022年12月02日 00:46/ 0 赞/ 278 阅读

相关混合开发笔记5——h5页面在ios刘海屏适配

h5页面在ios刘海屏适配多种，只总结其中一种（官方适配方案） ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_sh

我会带着你远行/ 2022年12月02日 00:44/ 0 赞/ 590 阅读

相关混合开发笔记3——移动端h5页面滚动不自然

混合开发移动端h5页面滚动不自然描述：网页开发滚动会出现卡顿现象，不流畅，手机滑动，手指离开页面，直接停止滑动解决：手机滑动，手指离开页面滑动有缓冲效果，不

末蓝、/ 2022年12月02日 00:43/ 0 赞/ 237 阅读

相关混合开发笔记1——解决ios嵌入h5页面键盘收回页面错位

解决ios嵌入h5页面键盘收回页面错位描述：ios嵌入的h5页面当键盘弹起，页面上移，当键盘收回时，页面错位，并不回到原来位置解决： <input cl

偏执的太偏执、/ 2022年12月02日 00:42/ 0 赞/ 264 阅读

相关手机端h5页面自适应平板(iPad)js

手机页面h5自适应的方法有很多，比如：bootstrap，rem等等。下面分享给大家一个js控制viewPort视区自适应缩放的方法（我给它命名为phone.js）：将ph

雨点打透心脏的1/2处/ 2022年09月05日 05:24/ 0 赞/ 429 阅读

相关 H5开发app解决输入文本时，软键盘遮盖掉页面

首先我们要清楚输入时候触发软键盘的时候我们触发了什么事件，是调整浏览器窗口的大小时的resize事件我们知道了触发了什么事件就好办了，我们做一个监听这个事件的方法就好以

古城微笑少年丶/ 2022年05月14日 06:58/ 0 赞/ 289 阅读

相关手机端H5页面时间插件

插件最终版图：![70][] 1.引入css和js样式‘； <link rel="stylesheet" type="text/css" href="../mo

小咪咪/ 2022年05月13日 06:42/ 0 赞/ 331 阅读

相关手机上调试H5页面

1.在h5页面中引入js文件 <script src="https://cdn.bootcss.com/vConsole/3.3.0/vconsole.min.js"><

超、凢脫俗/ 2021年08月27日 19:50/ 0 赞/ 652 阅读

相关关于在h5移动端页面中a链接事件

在h5页面中a链接是经常用到的标签，但是在移动端，我们在页面滚动的时候，a链接就会给我们造成很大的困扰。比如我们本来只是想要页面进行滚动，结果当我们刚触碰到页面上时，页面就跳转

r囧r小猫/ 2021年08月13日 14:56/ 0 赞/ 504 阅读