移动端键盘弹起底部固定模块会被顶上去

最新推荐文章于 2026-03-11 00:07:38 发布

原创最新推荐文章于 2026-03-11 00:07:38 发布 · 1.7k 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#vue.js

收录于

vue 专栏收录该内容

32 篇文章

订阅专栏

本文介绍了一种解决移动端键盘弹起时底部按钮遮挡输入框的问题。通过实时监听窗口高度变化，与初始高度比较来判断键盘是否弹起。当键盘弹起时隐藏底部信息，否则显示。实现代码使用了Vue.js，通过data属性和watch监听屏幕高度变化，确保底部元素在键盘不遮挡输入框时正确显示。

问题：键盘弹起将底部按钮顶上去遮住输入框
解决思路：实时监听窗口高度与初始高度比较，判断键盘是否弹起，弹起隐藏底部否则显示底部

/vue/
<div class='footer'  v-show="isShow"></div>

	export default{
		data(){
			return{
					originHeight: 0, 	// 原始高度
					screenHeight: 0, 	// 实际高度
					isShow: true, 	// 显示或隐藏底部信息
			}
		},
		methods:{
            watchResize() {
                //实时变化的窗口高度
                this.screenHeight = document.documentElement.clientHeight;
            },
		},
		mounted () {
            //首次进入的原始高度
            this.originalHeight = document.documentElement.clientHeight;
            //监听屏幕变化并获取到屏幕原始高度
            window.addEventListener('resize', this.watchResize);
			
		},
        beforeDestroy() {			
            window.removeEventListener("resize", this.watchResize);			
        },		
		watch:{
            screenHeight(newVal) { 
                this.isShow= this.originalHeight <= newVal;
            }
		},		
	}