当某输入框获取焦点时,底部导航一栏使用的是fixed定位,会被键盘顶起
这里的解决方案是当focus被触发时键盘会弹出,这时候页面就会发生scroll滚动,我们只需监听resize的变化,然后对应的变化时将底部隐藏,无变化时再显示
data() { return { isShow: true, // 底部菜单 v-show 状态值 screenHeight: window.innerHeight, // 这里是给到了一个默认值 originHeight: window.innerHeight, // 默认高度在watch里拿来做比较 }; }, mounted: function () { const that = this; window.onresize = () => { return (() => { that.screenHeight = window.innerHeight; })(); }; }, watch: { screenHeight: function (newValue) { console.log('newValue', newValue); if (this.originHeight > newValue) { this.isShow = false; } else { this.isShow = true; } }, },
但是这里没有去掉屏幕横竖屏切换的情况,竖屏变横屏时,因高度变小,菜单也会消失,有需要的可以自己加判断。