移动端因软键盘的原因,固定在页面底部的按钮被弹起解决方案

作者:未知 / 来源:网络 / 整理:脚本之家如果知识不能与人分享,这不算是真正的知识了。
问题描述:移动端,当需要输入内容时,软键盘弹出往往会导致固定在底部的按钮、导航栏等被弹起,如图:解决思路:当键盘弹起时隐藏掉按钮,键盘隐藏时按钮显示监测键盘是否弹起(浏览器页面是否发生变化)代码:1、定义一个底部按钮<div class="returnbtn" v-show="isOriginHei" :class="{active: c...

问题描述:移动端,当需要输入内容时,软键盘弹出往往会导致固定在底部的按钮、导航栏等被弹起,如图:

这里写图片描述


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

    <div @H_404_22@class="returnbtn" @H_404_22@v-show="isOriginHei" @H_404_22@:class="{active: canSubmit}" @H_404_22@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;
            }
        }

作者:rookie.he(kuke_kuke)
博客链接:http://blog.csdn.net/qq_33599109
欢迎关注支持,谢谢!

你可能在找的问题:

vue教程

Vue页面跳转动画效果的实现方法

百度了好久都没办法实现vue中一个页面跳到另一个页面,甚至到google上搜索也是没办法的,最终还是找了高人亲自指导,所以下面这篇文章主要给大家介绍了关于Vue页面跳转动画效果的实现方法,需要的朋友可以参考下

vue教程

vue构建动态表单的方法示例

这篇文章主要介绍了vue构建动态表单的方法示例,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧

vue教程

玩转vue的slot内容分发

这篇文章主要介绍了玩转vue的slot内容分发,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧

vue教程

vue 巧用过渡效果(小结)

这篇文章主要介绍了vue 巧用过渡效果(小结),小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧

微信扫一扫

微信扫一扫

微信扫一扫,分享到朋友圈

标题
返回顶部