博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
移动端键盘弹起引起的fixed定位问题
阅读量:7300 次
发布时间:2019-06-30

本文共 730 字,大约阅读时间需要 2 分钟。

当某输入框获取焦点时,底部导航一栏使用的是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://xefnm.baihongyu.com/

你可能感兴趣的文章
(七)Action访问Servlet API
查看>>
POJ2960 S-Nim(博弈论:sg函数)
查看>>
$().each()和$.each()
查看>>
iconfont字体图标
查看>>
AndroidStudio下加入百度地图的使用 (三)——API基本方法及常量属性
查看>>
二、2、上传成功也不一定得到flag哦!
查看>>
火狐浏览器设置placeholder的时候记得改opacity
查看>>
Mina学习
查看>>
java通过句柄访问对象
查看>>
extern "C"与C++中的C函数调用(4)—— 如何在C中调用C++函数
查看>>
计算几何 模板
查看>>
“The Psychology of Cross Country”笔记
查看>>
10 Web Apps for Developers 为开发者提供的10款Web应用程序
查看>>
python之正则表达式
查看>>
Shell命令-文件及目录操作之touch、tree
查看>>
修改K/3 Cloud管理中心端口
查看>>
C#语言课程11月7日
查看>>
linux日常1-踢出用户
查看>>
MFC多文档应用程序同时显示两个视图
查看>>
github快速入门(一)
查看>>