安卓H5页面fixed布局被软键盘上顶问题

最新推荐文章于 2025-06-03 16:39:46 发布

原创最新推荐文章于 2025-06-03 16:39:46 发布 · 486 阅读

0 ·

CC 4.0 BY-SA版权

Vue 专栏收录该内容

38 篇文章

订阅专栏

该博客介绍了如何使用Vue.js监听窗口大小变化，动态调整页面元素的显示状态。通过设置`isTabbar`变量控制固定内容的显示与隐藏，根据`docmHeight`和`showHeight`实时判断屏幕高度，实现页面适配。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Vue

data:{
			isTabbar: true, //判断页面的fixed内容是展示还是隐藏
 			docmHeight: document.documentElement.clientHeight,  //默认屏幕高度
            showHeight: document.documentElement.clientHeight,   //实时屏幕高度
},
 mounted() {
            // window.onresize监听页面高度的变化
            window.onresize = () => {
                return (() => {
                    this.showHeight = document.documentElement.clientHeight;
                })()
            }

        },
        watch: {
            showHeight() {
                if (this.docmHeight > this.showHeight) {
                    this.isTabbar = false
                } else {
                    this.isTabbar = true
                }
            }
        },