解决移动端软键盘弹起底部固定布局被顶上去问题和屏幕背景被压缩问题

时间：2025-01-22 07:28:34

1：解决移动端软键盘弹起底部固定布局被顶上去问题

在前端页面布局中经常会把一些按钮通过fixed或absolute固定到底部，但如果页面上有input或textarea被点击获取焦点时，在移动端上软键盘弹起时就会把这些固定到底部的布局顶上去，有时会十分影响美观，下面是在Vue项目中如何通过隐藏的方式实现不被顶上去的

实现步骤

1. 在mounted中添加对resize屏幕变化监听并获取到屏幕原始高度
2. 在watch中添加对data中定义的屏幕高度的监听
-----------2.1：小于原始高度底部布局就隐藏，否则就显示
3. 在beforeDestroy中删除对resize屏幕变化的监听

完整代码

<template>
    <div class="wrapper">
        <input type="text" class="input">
        <span class="btn" @click="btnClick" v-show="isShow">跳转下一步</span>
    </div>
</template>

<script>
    export default {
        name: "Demo",
        data() {
            return {
                originalHeight: 0, //原始高度
                screenHeight: 0, //实时高度
                isShow: true,
            }
        },
        mounted() {
            //首次进入的原始高度
             = ;
            ('resize', );
        },

        beforeDestroy() {
            ("resize", );
        },

        watch: {
            screenHeight(newHeight) { //监听屏幕高度变化
                 =  <= newHeight;
            }
        },

        methods: {
            watchResize() {
                //实时变化的窗口高度
                 = ;
            },

            btnClick() {
                this.$({
                    path: "/home2"
                })
            }
        }
    }
</script>

<style scoped lang="less">
    .wrapper {
        position: relative;
        width: 100%;
        height: 100%;
        background: #eee;
        .input {
            display: inline-block;
            height: 60px;
            margin: 10px;
            border: 2px solid #00ff00;
        }
        .btn {
            position: fixed;
            left: 50%;
            bottom: 3%;
            margin-left: -150px;
            width: 300px;
            height: 40px;
            text-align: center;
            line-height: 40px;
            background: chocolate;
        }
    }
</style>

注意事项

1：在项目中如果使用的方式对屏幕进行监听时，则这种监听是全局的监听，如果不注销则对其他页面屏幕的变化也会进行监听，所以必须在beforeDestroy中进行注销

    mounted() {
         = () => {
             = ;
        };
    },

    beforeDestroy() {
         = () => {}
    },

2：通过addEventListener方式对resize进行监听，通过手机验证如果不注销也不会影响其他页面，但是最好我们都写上

2：解决安卓手机上调出软键盘，屏幕背景图被压缩的问题

在Vue项目的类中添加如下代码：

	<script>
	    export default {
	        name: "app",
	        created() {
	            var height= ; //获取当前可视区域的高度
	             = function(){ //在页面整体加载完毕时
	                ('app').= height + 'px'//给根布局设置高度
	            }
	        }
	    }
	</script>

vue代码：

    <div class="wrapper" id = "demo">
        <input type="text" class="input">
    </div>

    .wrapper {
        position: relative;
        width: 100%;
        height: 100%;
        background: url("../public/static/images/") no-repeat center;
        background-size: cover;
        }

这样设置后，当软键盘弹起时，如果未遮挡获取焦点的元素，则背景图不会动，如果软键盘遮挡了获取焦点的元素，则背景图和图上的元素都会整体往上移动，而不会对背景图进行压缩。

注意事项

1: 有时候我们想直接在vue代码中直接控制最外层标签的高度不就可以吗，这样也不用全局设置了，如

	created() {
	             = ;
	             = function () { //加不加都是不可以的
	                ('demo'). = '100%'; //不会生效，而宽度由内部标签撑开
	                ('demo'). =  + 'px'; //不会生效，而高度由内部标签撑开
	                ('demo'). = "url('static/images/') no-repeat center";
	                ('demo'). = "cover";
	            }
	        },

样式为：

    .wrapper {
        position: relative;
        }

实践证明这样是不可以的，虽然originalHeight获取到的是可视区的大小，但是把高度设置给最外层标签后并不会生效，而是最外层标签的高度和宽度都是由其内部标签高度和宽度决定的。如图加不加都是不可以的。

2: 我们能不能在代码中设置id为app标签的高度呢？如

	created() { //注意这里设置高度不加   (加上就不可以了)
	             = ;
	            ('app'). =  + 'px';
	        },

	vue代码：（其实和上面一样）
    <div class="wrapper" id = "demo">
        <input type="text" class="input">
    </div>

    .wrapper {
        position: relative;
        width: 100%;
        height: 100%;
        background: url("../public/static/images/") no-repeat center;
        background-size: cover;
        }

这种方式是可以的，但这种方式设置后也是全局的，也就是对所有页面都会生效，如果你偏要只在当前页面有效的话，那可以在适当的位置再重置根布局高度，如：

('app'). = 'auto';

相关文章