当某输入框获取焦点时,底部导航一栏使用的是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;
}
},
},
但是这里没有去掉屏幕横竖屏切换的情况,竖屏变横屏时,因高度变小,菜单也会消失,有需要的可以自己加判断。
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。